我无法让我的孩子<ul>
正确显示。当下拉菜单打开时,它会显示在菜单的其余部分下方。我想要的是<li>
的其余部分向下移动以便为下拉列表腾出空间。
HTML:
<ul class="nav">
<li>One</li>
<li>Two
<ul>
<li>Two One</li>
<li>Two Two</li>
</ul>
</li>
<li>
Three
<ul>
<li>Four</li>
<li>Five</li>
</ul>
</li>
</ul>
CSS:
.nav {
width: 250px;
font-size: 18px;
color: white;
list-style: none;
display: block;
z-index: 2;
}
.nav li {
background-color: #000;
display: block;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav li:hover {
background-color: #008cba;
}
.nav ul {
display: none;
font-size: 16px;
z-index: 3;
}
.nav ul li {
background-color: #cccccc;
color: #000;
border-bottom: #464646 solid 1px;
}
.nav ul li:hover {
background-color: #464646;
}
.active {
display: initial!important;
tranistion: 0.5s;
}
jQuery的:
$(document).ready(function() {
$("ul.nav li ").click(function() {
$(this).find("ul").toggleClass("active");
});
});
答案 0 :(得分:0)
你应该:
以下是相关课程:
.nav li {
background-color: #000;
display: block;
line-height: 40px;
text-align: center;
}
.nav ul {
display: none;
font-size: 16px;
z-index: 3;
position: relative;
}
.active {
display: block !important;
transition: 0.5s;
}