我正在使用CSS:在伪选择器之前在下拉列表中的第一个项目上方创建一个块。我一直无法使用伪选择器创建的块与< 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;
}
答案 0 :(得分:0)