最近几个月前，我不得不将子级别功能添加到我们网站之一的下拉菜单中。我之前采用的策略对于导航中的一列效果很好，但我被要求在它之前的列中添加一个子级别，这不起作用，因为我使用的是相对定位(请参见下面的示例):
<style type="text/css">
#div#mycontent { overflow: visible; }
#nav ul { font-family: Arial, Verdana; font-size: 10px; margin: 0; padding: 0; list-style: none; font-weight: bold; }
#nav ul li { display: block; float: left; margin: 0;}
#nav li ul { display: none; }
#nav ul li a { display: block; text-decoration: none; color: #3c1c4e; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #f0e8d8; margin-left: 1px; white-space: nowrap; }
#nav ul li a:hover { background: #f0e8d8; }
#nav li:hover ul { display: block; position: absolute; }
#nav li:hover li { float: none; font-size: 11px; }
#nav li:hover a { background: #f0e8d8; }
#nav li:hover li a:hover { background: #fff7e7; }
/* 这用于下拉列表中的子级别 */ #nav li:hover ul li ul {显示:无} #nav li ul li:hover ul { 显示: block ； } #nav li ul li ul li { position:relative；左:188px；底部:25px ;padding-left:1px }
所以我修改了下拉菜单中的子级别以使用重叠方法的相对定位(由于以前的编码器最初设计下拉菜单的方式)。新代码如下所示:
#nav li ul li ul li { position: absolute; left: 125px; bottom: 0px; border-style: solid; border-width: 1px; border-color:purple; z-index: 1; }
然而，正如标题所示，无序列表下的 LI 现在正在彼此堆叠。而不是一个接一个地垂直显示。我相信它需要我清除 float ，但看起来它是在上面完成的。所以我不确定是否需要重新定义 float 然后清除它以确保子列表中的链接将垂直显示。
编辑:
添加 HTML 以显示我如何尝试执行此操作的好主意:
<html>
<head>
<style type="text/css">
#div#mycontent { overflow: visible; }
#nav ul { font-family: Arial, Verdana; font-size: 10px; margin: 0; padding: 0; list-style: none; font-weight: bold; }
#nav ul li { display: block; float: left; margin: 0;}
#nav li ul { display: none; }
#nav ul li a { display: block; text-decoration: none; color: #3c1c4e; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #f0e8d8; margin-left: 1px; white-space: nowrap; }
#nav ul li a:hover { background: #f0e8d8; }
#nav li:hover ul { display: block; position: absolute; z-index: 0;}
#nav li:hover li { float: none; font-size: 11px; }
#nav li:hover a { background: #f0e8d8; }
#nav li:hover li a:hover { background: #fff7e7; }
/* This is for sublevels in the drop down */
#nav li:hover ul li ul {display: none}
#nav li ul li:hover ul { display: block; }
#nav li ul li ul li { position: absolute; left: 125px; bottom: 0px; border-style: solid; border-width: 1px; border-color:purple; z-index: 1; }
</style>
</head>
<body>
<div id="nav">
<ul id="menu">
<li><a href="#">Column 1</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</li>
<li> <a href="#">Column 2</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</li>
<li><a href="#">Column 3</a><li>
</ul>
</div>
</body>
</html>
最佳答案
在下拉列表中为您的子级别尝试这些 CSS 规则:
/* This is for sublevels in the drop down */
#nav li:hover ul li ul {
display: none
}
#nav li ul li:hover ul {
display: block;
position:absolute;
top:0;
left:100%;
}
#nav li ul li ul li {
position:relative;
display: block;
float: left;
border: 1px solid purple;
z-index: 1;
}
关于html - 下拉菜单中的子级别相互堆叠而不是垂直显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16673831/