我正在尝试创建一个带有箭头的导航栏,该项目位于项目上方.这是我想要做的：
对于箭头,我使用了之前和之后的伪元素.以下是一些代码：
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;
}
RecommendedRecent
由于边框颜色,箭头为黑色.如何只显示箭头的边框？
