Question

我希望你能解决我的小问题。我只是更新了我的一个开发人员样式表。我是CSS的初学者，所以我在添加二级子菜单时遇到了困难。这是链接DEMO PAGE

这是我的HTML

 <div id="sidebar"><a href="#" class="visible-phone"><i class="icon icon-home">    </i>Dashboard</a><ul style="display: block;">
    <li class="active"><a href="#"><i class="icon icon-home"></i> <span>Dashboard</span></a> </li>
    <li> <a href="#"><i class="icon icon-signal"></i> <span>Charts &amp; graphs</span></a> </li>

    <li><a href="#"><i class="icon icon-th"></i> <span>Tables</span></a></li>
    <li><a href="#"><i class="icon icon-fullscreen"></i> <span>Full width</span></a></li>

    <li class="submenu"> <a href="#"><i class="icon icon-th-list"></i> <span>API</span> <span class="label label-important">4</span></a>
      <ul>
        <li>
            <a href="#">boom</a>
            <ul>
            </ul>
        </li>
        <li><a href="#">% of National Roads Paved</a></li>
        <li><a href="#">Process</a></li>
        <li><a href="#">Regional Profiles</a></li>
      </ul>
    </li>
  </ul>
</div>

这是我的CSS

/* Top user navigation */
#sidebar{ width:100%; background:#252125;  position:absolute; clear:both; top:62px;}
#sidebar > ul{ margin:0px; padding:0px; width:100%; display:block; z-index:999;} 

/*Border right sidebar */
    #sidebar > ul > li { list-style-type:none; float:left; display:block; margin:0px; border-right:1px solid #464652; position:relative; padding:10px; cursor:pointer} 
/*Border right */

#sidebar > ul > li a{ padding:12px 0;}
#sidebar > ul > li:hover ul { display:block;} 
/*#sidebar > ul > li:hover { background-color:#41bedd;} */

/*On hover menu */
#sidebar > ul > li:hover { background-color:#464652;}
/*On hover menu */
#sidebar > ul > li:hover a{ background:none;}
/*Modules color */
#sidebar > ul li ul { margin:0px; padding:0px; display:none; z-index:999;  position:absolute; left:0px; top:40px;  background:#464652; min-width:200px;} 
/*Modules color */
#sidebar > ul li ul li { list-style-type:none; margin:0px; font-size:12px;line-height:30px;  } 
#sidebar > ul li ul li a { display:block; padding:5px 10px; color:#fff; text-decoration:none; font-weight:bold; } 
/*Modules color on hover */
#sidebar > ul li ul li:hover a{ background-color:#5A5A69;} 
/*Modules color  on hover*/
#sidebar > ul li span { cursor:pointer; margin:0px 2px 0 5px; font-weight:bold; color:#fff; font-size:11px; }
#sidebar > ul li a i{ background-image: url("../img/glyphicons-halflings-white.png"); margin-top:4px; vertical-align: top;}

我知道这篇文章是从不同的帖子发布的。我真的无法理解他们。希望你能理解。提前谢谢。

Answer 1

首先，在您的示例HTML中，您的第三级中没有li个。把一些放在那里。

至于你的CSS，它目前设置为在悬停时处理UL的低于顶级的显示和隐藏。我们需要更具体，以便排除第3级 - 然后更具体，并添加第二级悬停样式。

你有这个：

#sidebar > ul > li:hover ul { display:block;}

将其更改为：

#sidebar > ul > li:hover > ul { display:block;}

第一个将在悬停时显示LI的所有子UL。后者只会在悬停时显示LI的直接子项。

现在我们需要为第3级添加触发器：

#sidebar > ul > li > ul > li:hover > ul { display:block; top: 0; left: 200px}

当我们看到它时，我们包含了一组新的定位，使其显示在当前悬停的右侧而不是下方（这将覆盖第二级导航。

工作示例：http://jsfiddle.net/wS9t3/

二级子菜单CSS

1 个答案: