爱编程爱分享，原创文章，转载请注明出处，谢谢！http://www.cnblogs.com/fozero/p/6187323.html
1、全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用纯CSS实现带箭头的提示框</title>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
.nav {
background-color: #5CACEE;
height: 78px;
width: 100%;
position: relative;
}
.nav img {
cursor: pointer;
position: absolute;
right: 120px;
top: 25px;
width: 28px;
}
.nav .sub-nav {
position: absolute;
right: 40px;
top: 72px;
font-size: 9pt;
display: block;
width: 120px;
background-color: transparent;
*border: 1px solid #666;
}
.sub-nav s {
position: absolute;
top: -20px;
*top: -22px;
left: 20px;
display: block;
height: 0;
width: 0;
font-size: 0;
line-height: 0;
border-color: transparent transparent #dadada transparent;
border-style: dashed dashed solid dashed;
border-width: 10px;
}
.sub-nav s i {
position: absolute;
top: -9px;
*top: -9px;
left: -10px;
display: block;
height: 0;
width: 0;
font-size: 0;
line-height: 0;
border-color: transparent transparent #fff transparent;
border-style: dashed dashed solid dashed;
border-width: 10px;
}
.sub-nav .content {
border: 1px solid #dadada;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
position: absolute;
background-color: #fff;
width: 100%;
*top: -2px;
*border-top: 1px solid #666;
*border-top: 1px solid #666;
*border-left: none;
*border-right: none;
*height: 102px;
box-shadow: 3px 3px 4px #999;
-moz-box-shadow: 3px 3px 4px #999;
-webkit-box-shadow: 3px 3px 4px #999;
padding-right: 15px;
}
.sub-nav .content ul {
list-style: none;
margin: 0;
padding: 0;
}
.sub-nav .content ul li {
border-bottom: 1px solid #dadada;
height: 38px;
line-height: 38px;
padding-left: 10px;
overflow: hidden;
}
.sub-nav .content ul li:last-child {
border-bottom: none
}
</style>
</head>
<body>
<div class="nav">
<img src="img/more.png" onmouseover="showNav();" onmouseout="hideNav();" />
<div class="sub-nav" style="display:none ;">
<div class="content">
<ul>
<li>造饭师XXXX一店</li>
<li>造饭师XXXX二店</li>
<li>造饭师XXXX三店</li>
<li>造饭师XXXX四店</li>
</ul>
</div>
<s><i></i></s>
</div>
</div>
<script>
function showNav() {
$(".sub-nav").show();
}
function hideNav() {
$(".sub-nav").hide();
}
</script>
</body>
</html>
2、显示效果图
时间： 2024-08-06 23:48:20