我的 CSS 下拉菜单有两个问题:JSFiddle
1) Transitions:希望当鼠标切换到菜单时菜单向下滑动以打开它。之前打开的菜单应该向上滑动关闭。
#nav ul li ul
{
-webkit-transition:height .5s ease-in;
-moz-transition:height .5s ease-in;
-o-transition:height .5s ease-in;
-ms-transition:height .5s ease-in;
transition:height .5s ease-in;
}
这似乎行不通;可能在错误的“ul li”选择器下,尽管我尝试了其他选择器。
2) 将父项(“Menu1”、“Menu2”)置于菜单项列表的顶部,使其覆盖第一个子项的上边框。也就是说,“Menu1”和“Item1”之间不应有边框,因为“Menu1”没有底边框,但看起来像有底边框,因为“Item1”在它上面。
尝试使用 z-index
,但无法正常工作。无论是转换。
我意识到菜单有点复杂,可能包含的 CSS 过多。
最佳答案
那怎么办? JSFiddle
#nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav ul li {
display: inline-block;
border: 1px solid #FFF;
border-bottom: 0;
border-radius: 5px;
margin: 0 15px;
position: relative;
-webkit-transition: border-color 0.2s ease-in;
-moz-transition: border-color 0.2s ease-in;
-o-transition: border-color 0.2s ease-in;
-ms-transition: border-color 0.2s ease-in;
transition: border-color 0.2s ease-in;
}
#nav ul li a {
color: #8799B3;
display: block;
padding: 10px 6px;
border: 0;
-webkit-transition: color 0.2s ease-in;
-moz-transition: color 0.2s ease-in;
-o-transition: color 0.2s ease-in;
-ms-transition: color 0.2s ease-in;
transition: color 0.2s ease-in;
}
#nav ul li:hover {
color: #415161;
border-color: #E9E9E9;
}
#nav ul li a:hover {
color: #415161;
}
#nav ul li ul {
opacity: 0;
visibility: hidden;
text-decoration: none;
line-height: 1;
color: #8799B3;
background: #FFF;
position: absolute;
top: calc(100% - 5px);
left: -1px;
z-index: 1000;
width: 165px;
border: 0;
}
#nav ul li:hover ul {
opacity: 1;
visibility: visible;
}
#nav ul li ul li {
border: 0;
display: block;
font-size: 14px;
margin: 0;
-webkit-transition: background 0.2s ease-in;
-moz-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in;
-ms-transition: background 0.2s ease-in;
transition: background 0.2s ease-in;
}
#nav ul li ul li:hover {
border: none;
color: #415161;
background: #F7F9FB;
}
#nav ul li ul li a {
padding: 10px;
border: none;
color: #8799B3;
border-left: 1px solid #E9E9E9;
border-right: 1px solid #E9E9E9;
border-bottom: 1px solid #E9E9E9;
}
#nav ul li ul li:first-child a {
border-top: 1px solid #E9E9E9;
border-radius: 0 5px 0 0;
}
#nav ul li ul li:last-child a {
border-bottom: 1px solid #E9E9E9;
border-radius: 0 0 5px 5px;
}
#nav ul li ul {
-webkit-transition: opacity 0.2s ease-in;
-moz-transition: opacity 0.2s ease-in;
-o-transition: opacity 0.2s ease-in;
-ms-transition: opacity 0.2s ease-in;
transition: opacity 0.2s ease-in;
}
<div id="nav">
<ul>
<li>
<a href="#">Menu1</a>
<ul>
<li><a href="menu.html">Item1</a></li>
<li><a href="menu.html">Item2</a></li>
<li><a href="menu.html">Item3</a></li>
<li><a href="menu.html">Item4</a></li>
</ul>
</li>
<li>
<a href="#">Menu2</a>
<ul>
<li><a href="menu.html">Item1</a></li>
<li><a href="menu.html">Item2</a></li>
<li><a href="menu.html">Item3</a></li>
<li><a href="menu.html">Item4</a></li>
</ul>
</li>
<li>
<a href="#">Menu3</a>
<ul>
<li><a href="menu.html">Item1</a></li>
<li><a href="menu.html">Item2</a></li>
<li><a href="menu.html">Item3</a></li>
<li><a href="menu.html">Item4</a></li>
</ul>
</li>
</ul>
</div>
关于CSS 下拉菜单 : z-index issue,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31172387/