我正在尝试创建一个带有箭头的导航栏,该项目位于项目上方.这是我想要做的:
对于箭头,我使用了之前和之后的伪元素.以下是一些代码:
body { background: #FFFFFF; color: #FFFFFF; margin: 0px; padding: 0px; height: 100%; } .clear { clear: both; } .page-wrap { width: 980px; margin: 0px auto; height: 100%; } #main-menu { background: white; height: 55px; width: 100%; padding: 0px; margin: 0px; border-bottom: 1px solid black; } ul { font-family: Arial,Verdana; font-size: 18px; margin: 0; padding: 0; list-style: none; } ul li { display: block; position: relative; float: left; } li ul { display: none; } ul li a { display: block; text-decoration: none; color: black; padding: 0 9px 0 9px; background: white; margin-left: 1px; white-space: Nowrap; line-height: 55px; font: 18px; font-family: Arial,Helvetica,sans-serif; outline: none; } ul li a:hover { color: black; } #menu a:hover:after { content: ""; position: absolute; top: 40px; left: 50%; margin-left: -15px; width: 0px; height 0px; xxmargin: 0px auto; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid black; }
<header id="main-menu"> <div class="page-wrap"> <ul id="menu"> <li><a href="#">Recommended</a></li> <li><a href="#">Recent</a></li> </ul> </div> </header>
由于边框颜色,箭头为黑色.如何只显示箭头的边框?
解决方法
只需在你添加的伪元素之前添加:after
#menu a:hover:after { content: ""; position: absolute; top: 41px; left: 50%; margin-left: -15px; width: 0px; height 0px; margin: 0px auto; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid white; } #menu a:hover:before { content: ""; position: absolute; top: 40px; left: 50%; margin-left: -15px; width: 0px; height 0px; margin: 0px auto; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid black; }
我已经更新了你的笔请检查
原文地址:https://www.jb51.cc/html/231858.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。