我正在尝试使用嵌套列表获得 CSS 样式的页脚菜单，因为这似乎是当今大多数 CMS 使用的标准方式。但是，我很难将宽度和高度动态扩展到正确的尺寸。因此，每个顶级列表项都是水平放置的，而每个子级列表项都列在下面。
问题 1：我希望顶级列表项的总宽度为最长子列表项或顶部列表项的宽度，以较长者为准。我不想断线。
问题 2：周围 DIV 的高度没有扩展（尝试使用这两种方法以及使用CSS 选择器overflow: auto的方法），而是显示滚动条。clear: both:after
我想避免固定高度，因为我想让菜单动态化。
我该怎么做才能解决上述问题？这是我到目前为止所拥有的：（现场示例）
<div id="footer">
<div id="footerstrip" >
<div id="footercontent" >
<div id="footerleft">
<img src="images/LogoGrey.png" /> <a href="#"><img src="images/FooterHome.png" /></a>
</div>
<div id="footer-menu-div">
<ul id="footer-menu">
<li>Fashion
<ul>
<li>Apparel</li>
<li>Celebrity Styles</li>
<li>Fashion Spotlight</li>
<li>Trends</li>
</ul>
</li>
<li>Beauty
<ul>
<li>Hair</li>
<li>Skincare</li>
<li>Make-up & Cosmetics</li>
<li>Nails</li>
</ul>
</li>
</li>
<li>Lifestyle</li>
<li>Love</li>
<li>Culture</li>
<li>Subscribe</li>
<li>Events</li>
</ul>
</div>
</div>
</div>
CSS：
#footer
{
margin-top: 30px;
clear: both;
width: 100%;
}
#footerstrip
{
background-color: #F0F0F0;
width: 100%;
margin-top: 20px;
overflow: auto;
}
#footercontent
{
padding: 10px 0px 10px 0px;
width: 1100px;
text-align: left;
color: #666666;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
text-transform:uppercase;
vertical-align:middle;
margin: auto;
overflow: auto;
background-color: #e0e0df;
}
#footercontent a
{
color: #666666;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-decoration:none;
overflow: auto;
}
#footercontent img
{
vertical-align: middle;
margin-left: 5px;
}
#footerleft
{
text-align:right;
width: 120px;
padding: 0px;
margin: 0px;
float: left;
}
#footer-menu-div
{
float: left;
padding: 0px 5px 0px 5px;
margin: auto;
text-align: left;
position: relative;
display: block;
}
#footer-menu-div:after {
content:"";
clear:both;
display:block;
}
ul#footer-menu
{
margin: 0px;
padding: 0px;
}
ul#footer-menu li
{
background-color: #c7c6c6;
color: #212121;
font-weight: bold;
font-size: 11px;
list-style: none;
display: inline;
margin: 0px;
padding: 5px 10px 5px 10px;
font-family:Arial, Helvetica, sans-serif;
float: left;
text-transform: capitalize;
position: relative;
}
ul#footer-menu li:first-child
{
border-top-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
}
ul#footer-menu li:last-child
{
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
}
ul#footer-menu li ul
{
display: block;
position: absolute;
margin: 0;
padding: 0;
}
ul#footer-menu li ul li
{
background-color: transparent;
font-weight: normal;
display: inline;
}
更新
我只希望带有圆角的条带围绕顶级列表项，而不是围绕所有项。所以它会在一条线上全部水平。
更新 2
实际上，每个列表项的内容都会是一个<a>链接。根据到目前为止的反馈，我设法想出了这个，但是我必须这样做<a>才能width: 100%让背景继续下一个顶级项目，因此它超出了水平空间。:(
如果有办法使顶级项目链接与最长的子链接一样宽，则问题将得到解决。