我正在使用 CSS :before 伪选择器在下拉列表中的第一项上方创建一个块。我一直无法让使用伪选择器创建的这个块与它上面的 <li> 宽度相同。
例如,当您将鼠标悬停在“关于”上时,出现在其下方的伪块应该与包含“关于”一词的块的宽度相同,其他 3 个块以此类推。
这是我到目前为止所得到的一个小提琴:http: //jsfiddle.net/jh67P/
这是我的 HTML:
<nav>
<ul class="main">
<li><a href="#">About</a>
<ul class="secondary">
<li><a href="#">Learn About Us</a></li>
<li><a href="#">Nice things to know</a></li>
</ul>
</li>
<li><a href="#">Products</a>
<ul class="secondary">
<li><a href="#">Product One</a></li>
<li><a href="#">Product Two</a></li>
</ul>
</li>
<li><a href="#">Features</a>
<ul class="secondary">
<li><a href="#">Something Nice</a></li>
<li><a href="#">Another nice thing</a></li>
</ul>
</li>
</ul>
</nav>
这是CSS:
nav .main {
font-size: 1em;
margin: 0;
padding: 0;
list-style: none;
}
.main > li {
display: block;
position: relative;
float: left;
}
.main > li a {
display: block;
text-decoration: none;
color:#FFF;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
.main > li a:hover {
background: #3b3b3b;
color:#FFF;
}
.secondary {
display:none;
list-style: none;
margin: 0;
padding: 0;
}
.main li:hover .secondary {
display: block;
position: absolute;
}
.main li:hover ul li {
float: none;
font-size: 1em;
}
.main > li:hover a { background: #3b3b3b; }
.main > li:hover li a:hover {
background: #1e7c9a;
}
.main li:hover ul:before {
content:'';
display:block;
width:100%;
height:10px;
border-bottom:10px solid #1e7c9a;
border-right: 10px solid transparent;
}
编辑:使用绝对定位我能够达到效果。这是更新的 CSS。
nav .main {
font-size: 1em;
margin: 0;
padding: 0;
list-style: none;
}
.main > li {
display: block;
position: relative;
float: left;
}
.main > li a {
display: block;
text-decoration: none;
color:#FFF;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
.main > li a:hover {
background: #3b3b3b;
color:#FFF;
}
.secondary {
display:none;
list-style: none;
margin: 0;
padding: 0;
}
.main li:hover .secondary {
display: block;
position: absolute;
top:40px;
}
.main li:hover ul li {
float: none;
font-size: 1em;
}
.main > li:hover a { background: #3b3b3b; }
.main > li:hover li a:hover {
background: #1e7c9a;
}
.main > li:hover:after {
content:'';
display:block;
width:100%;
height:10px;
border-bottom:10px solid #1e7c9a;
border-right: 10px solid transparent;
position:absolute;
top:20px;
margin-left:1px;
}