爱编程爱分享，原创文章，转载请注明出处，谢谢！/fozero/p/6187323.html
1、全部代码
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>使用纯CSS实现带箭头的提示框</title><script src="/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、显示效果图
