2

我有一个菜单栏。菜单栏是水平的。然后在悬停时垂直扩展子菜单。此子菜单中的项目包括管理主题、手动爬取、爬取间隔和存档列表。当鼠标悬停在管理主题上时，它应在其右侧提示另一个下拉列表以生成子子菜单。但是，我可以使这个子子菜单出现在右侧。它重叠了我的子菜单。因为我对 CSS 很陌生，所以我在这方面肯定需要帮助。我有一种感觉，我什至没有编辑#menu ul li ul li ul、#menu ul li ul li:hover ul、#menu ul li ul li:hover ul li 和#menu ul li ul li ul 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;
}​
4

4 回答 4

4

第一个问题

您必须将子菜单包装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;               
}

Stylecheet 的改进

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

但是你也可以在其他方面改进你的风格。例如，您可以使用选择器为所有子菜单设置属性#menu ul（如果您的 ul 菜单具有 id menu），因为它们都是菜单中的列表。如果你只想为第一级子菜单设置一些东西，你可以使用#menu > li > ul它，因为它只接近直接子菜单。对于二级子菜单，请使用#menu ul ul.

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

例子

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

在那里你可以看到改进的源代码（html 和 css）和一个工作现场演示。并且通过此编辑，还对 stylecheet 进行了评论以供您理解。我希望对您有所帮助，并且您将继续学习 css！

于 2012-09-06T19:20:16.973 回答
1

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

像这样修改您的 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>子菜单的之后。

于 2012-09-06T19:21:44.430 回答
1

像这样改变你的CSS

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

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

并添加

#menu ul li ul li ul {
display: none;
}
于 2012-09-06T19:29:07.763 回答
0

只是为了添加到 danijar 的 js fiddle 解决方案中。

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

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

这是一个菜单示例，您可能希望为其添加上述样式：http: //jsfiddle.net/codk1sgm/5/

于 2020-05-03T09:10:08.633 回答