ネストされたリストを使用して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;
}
アップデート
角が丸いストリップを、すべてのアイテムではなく、トップレベルのリストアイテムの周りに配置するだけにします。したがって、すべて水平方向に1本の線の周りになります。
更新2
実際には、各リスト項目の内容は<a>リンクになります。これまでのフィードバックをもとに、なんとか思いついたのですが、背景が次のトップレベルのアイテムに続くためには、水平方向のスペースがなくなってしまうため、<a>やらなければなりませんでした。width: 100%:(
トップレベルのアイテムリンクを子リンクの最長のものと同じ幅にする方法があれば、問題は解決されます。