Question

我有一个托管博客，我正在修改模板，但是在导航栏中添加子菜单的代码直接来自这个很棒的教程：

http://www.devinrolsen.com/pure-css-horizontal-menu/

我还阅读了有关Stackoverflow http://bit.ly/16KQN0M

的问题的答案

但如果这是一个清除浮动的问题，我无法看到将"clear: both;"放在HTML中的位置（至少，我尝试过的任何工作都没有。）

将#dropnav li li更改为display: block;也不起作用。肯定有一些我想念的东西......

这是CSS。顶部的类与模板有关，但我会留下它们，因为它们可能是相关的。

<style type="text/css">
/* Derived from http://www.devinrolsen.com/pure-css-horizontal-menu/ */


#pagebody { position: inherit !important; width: 100%; } 
#pagebody-inner { position: inherit !important; width: 100%; } 

#alpha, #beta, #gamma, #delta {
    display: inline; 
    position: inherit !important; 
    float: left; 
    min-height: 0px; 
}

#dropnav 
{height:31px;} 

#dropnav ul
{margin:0px; padding:0px;}

#dropnav ul li
{display:inline; float:left; list-style:none; position: relative; height:31px; 
width: 175px; } 

#dropnav li a
{color:#efe1ca; font-family:'Roboto Condensed', sans-serif; font-weight:400;      
font-size:12px; }


#dropnav li a:hover
{color:#fff; text-decoration: none;}

#dropnav li ul
{margin: 0px; padding: 0px; display: none; position: absolute;  z-index: 99; top: 
31px; background-color: #f6f3cb; width: 250px;} 

#dropnav li:hover ul
{display:block; width:250px; } 

#dropnav li li
{list-style:none; display:list-item; font-size:100%;} 

#dropnav li li a
{color: #7a3535; text-decoration:underline; width: 250px; font-size: 16px; } 

#dropnav li li a:hover
{color:#000000; text-decoration:none; } 

li#main {padding: 0px;} /* Sets the padding of items in the main menu */

</style>

HTML标记，删除了标题：

<div id="main">
<div id="dropnav">
<ul>

<li class="nav-list-item"><a href="">-------</a>
  <ul id="subnav">
    <li style="width:180px;"><a href="">-------</a></li>
    <li style="width:180px;"><a href="">-------</a></li>
    <li style="width:180px;"><a href="">-------</a></li>
    <li style="width:180px;"><a href="">-------</a></li>
  </ul> 
</li>

<li class="nav-list-item"><a href="">-------</a>
  <ul id="subnav">
    <li style="width:180px;"><a href="">-------</a></li>
    <li style="width:180px;"><a href="">-------</li>
  </ul> 
</li>

</ul> 
</div>
</div>

导航栏子菜单容器：如何通过包装来处理长列表项溢出？

0 个答案: