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>
可以通过图片，但是性能上稍微差一点，可以用一个标签的边框来表示，下边框有颜色其余的透明然后定位即可。代码是个小例子，你可以看看。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
