Question

我有一个菜单栏。菜单栏是水平的。然后在悬停时垂直扩展子菜单。此子菜单中的项目包括管理主题，手动爬网，爬网间隔和存档列表。当鼠标悬停在“管理”主题上时，它应该提示右侧的另一个下拉列表以生成子子菜单。但是，我可以使此子子菜单显示在右侧。它重叠了我的子菜单。因为我对CSS很陌生，所以我肯定需要帮助。我有一种感觉，我甚至没有编辑 #menu ul li ul li ul，＃menu ul li li li：hover ul，＃menu ul li ul li：hover ul li and #menu ul li ul li li a：hover。谢谢。

HTML

<div id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Executive Summary</a></li>
        <li><a href="#" > Visual Analytics</a></li> 
        <li><a href="#" >Settings</a>
            <ul>                                      
                <li><a href="#" >Manage Subject</a></li>
                    <ul>
                        <li><a href="#">Add Subject</a></li>
                        <li><a href="#">Edit Subject</a></li>
                        <li><a href="#">Delete Subject</a></li>
                        <li><a href="#">Export Subject</a></li>
                    </ul>
                <li><a href="#">Manual Crawl</a></li>
                <li><a href="#">Crawl Interval</a></li> 
                <li><a href="#">Archive List</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

 #menu {
    position: relative;
    float: left;
    width: 1200px;
    height: 35px;
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 13px;
    padding: 0;    
    background-color:#000;
    text-align: center;
    z-index:1;
}

#menu ul {
    position: relative;
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}

#menu ul li {
    position: relative;
    float: left;
    height: 100%;
    padding: 0;
    line-height: 35px; 
}

#menu ul li a {
    position: relative;
    height: 100%; 
    width: auto;
    float: left;
    text-decoration: none;
     padding: 0px 10px 0px 10px;   
    margin: 0 3px;
    color: #fff;
    text-align: center;
}

#menu ul li ul {
   display: none;
   width: 150px; /* Width to help Opera out */
   background-color: rgba(0,0,0,0.5);
}

#menu ul li:hover ul {
    display:block;
   position: absolute;
   top: 35px;
   left: 0;
   margin: 0;
   padding: 0;
   z-index: 1;
   width:150px; 
}

#menu li li a{
    height: 35px; 
    width: 150px;
    float: left;
    text-decoration: none;
    padding: 0px; 
    margin: 0 0px;
    color: #fff;
    text-align: center;
}

#menu ul li ul li a:hover{
   background: rgba(255,255,255,0.5);
   width:150px;
   float:left;
}
#menu ul li ul li ul{ display:none; position:absolute;background-color:rgba(28,28,240,0.5);}
#menu ul li ul li:hover ul { display:block; position:absolute; top:0px;background-color:#fff;}
#menu ul li ul li:hover ul li { list-style:none; float:none; margin-left:1px; padding:0px; position:relative;background-color:#fff;}
#menu ul li ul li ul li a:hover{
   background-color: rgba(28,28,240,0.5);
   width:150px;
   float:left;
}

Answer 1

第一个问题

您必须将子菜单ul包含在更高级菜单项li中，才能使其正确显示。这是一个简单的html结构示例。

<ul id="menu">
    <li><a>mainmenu</a></li>
    <li><a>mainmenu</a></li>
    <li><a>mainmenu</a>
        <ul>
            <li><a>first level submenu</a></li>
            <li><a>first level submenu</a></li>
            <li><a>first level submenu</a>
                <ul>
                    <li><a>second level submenu</a></li>
                    <li><a>second level submenu</a></li>
                    <li><a>second level submenu</a></li>
                    <li><a>second level submenu</a></li>
                </ul>
            </li>
            <li><a>first level submenu</a></li>
            <li><a>first level submenu</a></li>
        </ul>
    </li>
    <li><a>mainmenu</a></li>
    <li><a>mainmenu</a></li>
</ul>

第二个问题

将第二级子菜单向右移动的技巧是为其提供属性left:150px。

#menu ul ul{
    left:150px;               
}

样式表的改进

顺便提一下，您可以先在css中指定最初隐藏的框的所有属性。然后，您的:hover选择器只需设置display:block规则即可显示该元素。如果它被display:none隐藏，则已设置的背景颜色将不可见。

但是还有其他一些方面你可以改进你的样式表。例如，您可以使用选择器#menu ul设置所有子菜单的属性（如果菜单的ul具有标识menu），因为它们都是菜单中的所有列表。如果您只想为第一级子菜单设置某些内容，则可以使用#menu > li > ul，因为它只接近直接子项。对于二级子菜单，请使用#menu ul ul。

使用这些技术，您的样式表更加抽象。我的解决方案也适用于无限数量级别的子菜单。例如，您可以通过添加html代码来实现第三级子菜单。样式表可以处理它。

实施例

以下是您的示例的工作小提琴：http://jsfiddle.net/m8Bcb/4/

在那里你可以看到改进的源代码（包括html和css）和一个有效的实时演示。通过此编辑，还可以评论样式表以供您理解。我希望这有助于你和你继续学习CSS！

Answer 2

您的子菜单需要位于父菜单的列表项内。

像这样修改你的HTML：

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Executive Summary</a></li>
    <li><a href="#" > Visual Analytics</a></li> 
    <li><a href="#" >Settings</a>
        <ul>                                      
            <li><a href="#" >Manage Subject</a>
                <ul>
                    <li><a href="#">Add Subject</a></li>
                    <li><a href="#">Edit Subject</a></li>
                    <li><a href="#">Delete Subject</a></li>
                    <li><a href="#">Export Subject</a></li>
                </ul>
            </li>
            <li><a href="#">Manual Crawl</a></li>
            <li><a href="#">Crawl Interval</a></li> 
            <li><a href="#">Archive List</a></li>
        </ul>
    </li>
</ul>

请注意，我所做的只是将</li>移到子菜单的</ul>之后。

Answer 3

像这样改变你的CSS

#menu ul li:hover > ul {
display:block;
position: absolute;
top: 35px;
left: 0;
margin: 0;
padding: 0;
z-index: 1;
width:150px; 
}

当你将整个ul节目悬停在li上时，这就是你必须选择直接兄弟姐妹的原因。

并添加

#menu ul li ul li ul {
display: none;
}

Answer 4

只需添加到danijar的js小提琴解决方案中即可。

您可能希望所有子菜单都相对于第一个列表（“主菜单项”）显示，但是更好的解决方案可能是相对于其父列表项显示列表或“子菜单”。

/* ensure each submenu displays relative to it's parent list item */
#menu ul li {
  position: relative;
}

以下是菜单的示例，您可能需要为以下菜单添加上述样式行： http://jsfiddle.net/codk1sgm/5/

下拉菜单3级（水平，然后是2个垂直）

4 个答案:

第一个问题

第二个问题

样式表的改进

实施例