0

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

http://www.devinrolsen.com/pure-css-horizo​​ntal-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>
4

0 回答 0