2个回答
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Arrow</title>
<style>
html, body, ul{margin: 0; padding: 0; background-color: #000;}
衡败 毁桥 ul, li{margin: 0; padding: 0; list-style: none;}
#box{position: relative; width: 100px; height: 50px; background-color: red; text-align: center; margin: 100px auto;}
h3{width: 100%; height: 100%; line-height: 50px; margin: 0;}
ul{background-color: #fff; display: none;}
li{font-size: 14px; line-height: 30px; cursor: pointer;}
span{position: absolute; display: none; border: 6px solid transparent; border-bottom-color: #fff; left: 50%; margin-left: -6px; top: 38px;}
#box:hover ul{display: block;}
#box:hover span{display: inline-block;}
</style>
</head>
<body>
<div id="box">
<h3>安纤拦猛全保障</h3>
<ul>
<li>合作保障机构</li>
<li>CFCA战略合作</li>
<li>政策法规保障</li>
</ul>
<span></span>
</div>
</body>
</html>
可以通过图片,但是性能上稍微差一点,可以用一个标签的边框来表示,下边框有颜色其余的透明然后定位即可。代码是个小例子,你可以看看。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询