文章/答案/技术大牛

发布

社区首页 >问答首页 >下拉菜单3级(水平，然后是2个垂直)

问下拉菜单3级(水平，然后是2个垂直)
EN

Stack Overflow用户

提问于 2012-09-07 02:42:29

回答 4查看 11.3K关注 0票数 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 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;
}

html

css

回答 4

Stack Overflow用户

回答已采纳

发布于 2012-09-07 03:20:17

第一个问题

您必须将子菜单项目包装在更高级别的menuitem 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具有id menu)，因为它们都是菜单中的列表。如果你只想为第一级子菜单设置一些东西，你可以使用#menu > li > ul，因为它只接近直接的子菜单。对于第二级子菜单，使用#menu ul ul。

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

示例

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

在那里你可以看到改进的源代码( html和css)和一个工作的现场演示。使用此编辑，样式表也会被注释，以便于您理解。我希望这对你有帮助，你会继续学习css！

票数 4

Stack Overflow用户

发布于 2012-09-07 03:21:44

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

如下所示修改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>之后。

票数 1

Stack Overflow用户

发布于 2012-09-07 03:29:08

更改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;
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12306439

复制

相似问题

问下拉菜单3级(水平，然后是2个垂直)
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问下拉菜单3级(水平，然后是2个垂直)EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问下拉菜单3级(水平，然后是2个垂直)
EN