4
我想在我的下拉菜單中創建一個懸停效果,但我無法弄清楚如何去做。CSS菜單懸停效果
我想要做的是這樣的:
,而不是這樣的:
我的代碼 - 你也可以看到它here,(updated version)
HTML:
<nav>
<ul>
<li><a href="#">One</a>
<ul>
<li><a href="1.html">1.1</a></li>
<li><a href="2.html">1.2</a>
</ul>
</li>
<li><a href="#">Two</a>
<ul>
<li><a href="3.html">2.1</a></li>
<li><a href="4.html">2.2</a></li>
<li><a href="5.html">2.3</a></li>
</ul>
</li>
<li><a href="#">Three</a>
<ul>
<li><a href="6.html">3.1</a></li>
<li><a href="7.html">3.2</a></li>
</ul>
</li>
<li><a href="8.html">Four</a></li>
</ul>
</nav>
CSS:
nav {
float: left;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content:"";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
}
nav ul li:hover {
background-color: #000;
}
nav ul li a:hover {
color: #fff;
}
nav ul li a {
display: block;
padding: 25px 15px;
color: #6F0;
text-decoration: none;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #000;
}
任何幫助將不勝感激。
我想它和它的作品。唯一的問題是我不希望懸停欄出現在子菜單中。另外,如果您查看更新的jsfiddle代碼,則子菜單現在不起作用。如果我使用'margin'並移動它以便更接近它的工作菜單,但是如果它不靠近菜單,我怎麼才能使它工作? – kalpetros 2013-04-22 20:59:15
@KalPetros讓我看看 – 2013-04-22 21:01:35
@KalPetros我提供的小提琴有什麼問題?我相信,我的答案回答了*原始問題。 – 2013-04-22 21:02:39