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

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

我还阅读了对Stackoverflow问题的回答

但是如果是清除一个浮点数的问题，我就看不出在HTML中把

“clear:both；”

放在哪里（至少，我尝试过的方法都不管用）

并将

#dropnav li

更改为

显示：块也不起作用。一定有什么我错过了

这是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>


/*源自http://www.devinrolsen.com/pure-css-horizontal-menu/ */
#pagebody{位置：继承！重要；宽度：100%；}
#pagebody内部{位置：继承！重要；宽度：100%；}
#α，β，γ，δ{
显示：内联；
职位：继承！重要；
浮动：左；
最小高度：0px；
}
#dropnav
{高度：31px；}
#dropnav-ul
{边距：0px；填充：0px；}
#李德普
{显示：内联；浮动：左；列表样式：无；位置：相对；高度：31px；
宽度：175px；}
#dropnav li a
{颜色：#efe1ca；字体系列：'Roboto Condensed'，无衬线；字体重量：400；
字体大小：12px；}
#降落导航李a：悬停
{颜色：#fff；文本装饰：无；}
#dropnav li ul
{边距：0px；填充：0px；显示：无；位置：绝对；z索引：99；顶部：
31px；背景色：#f6f3cb；宽度：250px；}
#dropnav li:悬停ul
{显示：块；宽度：250px；}
#李莉
{列表样式：无；显示：列表项；字体大小：100%；}
#李丽娜酒店
{颜色：#7a3535；文本装饰：下划线；宽度：250px；字体大小：16px；}
#dropnav-li-a：悬停
{颜色：#000000；文本装饰：无；}
li#main{padding:0px；}/*设置主菜单中项目的填充*/

和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>





宽度：180px；“>
宽度：180px；“>
宽度：180px；“>
宽度：180px；“>




宽度：180px；“>
宽度：180px；“>-------



到底是什么问题？您希望文本换行还是不换行？是的，它正在换行，但容器大小不会随换行而增加。我希望容器也能进行调整。如果容器下面有另一个
li
，则长容器中的文本将覆盖下一个容器。。。如果它是列表中的最后一个，则容器结束，文本挂在页面内容的底部。它似乎表现为行高已固定。它是否会从导航栏继承线高度？我试过
height:auto不过。