使用CSS在导航栏中显示边框三角形 [英] Show border triangle in navbar using CSS
本文介绍了使用CSS在导航栏中显示边框三角形的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我尝试在悬停在项目下的项目下创建一个带有箭头的导航栏。这是我想要做的:
I am trying to create a nav bar with an arrow under the item hovered upon. Here's is what I am trying to make:
对于箭头我已经使用伪元素之前
和
。下面是一些代码:
For the arrow I have used the pseudo elements before
and after
. Here is some of the code:
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>
箭头颜色为黑色,因为边框颜色。如何只显示箭头的边框?
The arrows are black in color, because of the border color. How to show just the borders of the arrow?
推荐答案
只需在 >
Just add before
pseudo element like what you add :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;
}
我已更新您的笔请检查
http://codepen.io/anon/pen/vOxmGZ
这篇关于使用CSS在导航栏中显示边框三角形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文