0

最近几个月前，我不得不将子级别功能添加到我们网站之一的下拉菜单中。我之前采取的策略对于导航中的一列效果很好，但是我被要求在它之前的列中添加一个子级别，这不起作用，因为我使用的是相对定位（参见下面的示例）：

<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 {display: none} #nav li ul li:hover ul { display: block; } #nav li ul li ul li { 位置：相对；左：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 现在正在彼此堆叠。而不是一个接一个地垂直显示。我相信它需要我清除浮动，但它看起来像是在上面完成的。所以我不确定是否需要重新定义浮动然后清除它以确保子列表中的链接将垂直显示。

编辑：

添加 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>
4

1 回答 1

2

在下拉列表中为您的子级别尝试这些 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;
    }
于 2013-05-21T20:04:35.267 回答