我已经使用 HTML、CSS 和 jQuery 制作了一个菜单，但似乎效果不佳。我认为问题在于应用于所有列表项的 float:left; 样式。如何将 float 的元素包裹在一个 div 中并防止它与内容发生冲突？
我尝试将 display:block; 应用于元素，但下拉菜单乱七八糟。
$('document').ready(function() {
$('li').hover(function() {
$(this).find('ul>li').slideToggle(200);
});
});ul {
margin: 0px;
padding: 0px;
list-style: none;
z-index: 1000;
}
ul li {
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #ff0000;
}
ul li a {
text-decoration: none;
color: white;
}
ul li li {
background-color: #999999;
display: none;
z-index: 1000;
}
ul li li:hover {
background-color: #555555;
}
a {
width: 100%;
height: 100%;
display: block;
}
.test {
z-index: 1;
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li><a href="#">home</a>
<ul>
<li><a href="#">podlink1</a>
</li>
<li><a href="#">podlink2</a>
</li>
<li><a href="#">podlink3</a>
</li>
</ul>
</li>
<li>
<a href="#">kontakty</a>
<ul>
<li><a href="#">podlink1</a>
</li>
<li><a href="#">podlink2</a>
</li>
<li><a href="#">podlink3</a>
</li>
</ul>
</li>
<li><a href="#">linki</a>
</li>
<li><a href="#">about</a>
</li>
</ul>
<div class="test">
finibus eget. Duis sed mi sodales, scelerisque odio nec, hendrerit lorem. Curabitur vehicula lorem neque, sed semper urna posuere ultricies. Donec rutrum
</div>
</body>
</html>最佳答案
当您使用 float 时， float 元素的容器变为 0 高度，因此您必须在菜单后清除 float
ul:after {
clear: both;
content: "";
display: table;
}
所以你的代码变成了
$('document').ready(function() {
$('li').hover(function() {
$(this).find('ul>li').slideToggle(200);
});
});ul {
margin: 0px;
padding: 0px;
list-style: none;
z-index: 1000;
}
ul:after {
clear: both;
content: "";
display: table;
}
ul li {
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #ff0000;
}
ul li a {
text-decoration: none;
color: white;
}
ul li li {
background-color: #999999;
display: none;
z-index: 1000;
}
ul li li:hover {
background-color: #555555;
}
a {
width: 100%;
height: 100%;
display: block;
}
.test {
z-index: 1;
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li><a href="#">home</a>
<ul>
<li><a href="#">podlink1</a>
</li>
<li><a href="#">podlink2</a>
</li>
<li><a href="#">podlink3</a>
</li>
</ul>
</li>
<li>
<a href="#">kontakty</a>
<ul>
<li><a href="#">podlink1</a>
</li>
<li><a href="#">podlink2</a>
</li>
<li><a href="#">podlink3</a>
</li>
</ul>
</li>
<li><a href="#">linki</a>
</li>
<li><a href="#">about</a>
</li>
</ul>
<div class="test">
finibus eget. Duis sed mi sodales, scelerisque odio nec, hendrerit lorem. Curabitur vehicula lorem neque, sed semper urna posuere ultricies. Donec rutrum
</div>
</body>
</html>关于javascript - 下拉菜单 - 与内容碰撞，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35842199/