順序付けられていないリストで構築された水平メニューがあります。リスト項目の 1 つにマウスオーバーすると、div 内に含まれるサブメニューが表示されます。サブメニューでは、コンテンツが正しく表示されている間、div 自体は親リスト項目の幅に制限されます。これにより、コンテンツが div の右側にオーバーフローします。div がそのコンテンツで展開されるようにするにはどうすればよいですか。
HTML:
<div>
<ul class="menu">
<li class="menuTab menuTabFirst">
Menu Bar Item 1
<div class="menuDropDown">
<h2><a href="#">Menu Heading Goes Here</a></h2>
<ul>
<li><a href="#">Menu Item 1 Goes Here</a></li>
<li><a href="#">Menu Item 2 Goes Here</a></li>
<li><a href="#">Menu Item 3 Goes Here</a></li>
<li><a href="#">Menu Item 4 Goes Here</a></li>
</ul>
<h2><a href="#">Menu Heading Goes Here</a></h2>
<ul>
<li><a href="#">Menu Item 1 Goes Here</a></li>
<li><a href="#">Menu Item 2 Goes Here</a></li>
<li><a href="#">Menu Item 3 Goes Here</a></li>
<li><a href="#">Menu Item 4 Goes Here</a></li>
</ul>
</div>
</li>
<li class="menuTab">
Menu Bar Item 2
<div class="menuDropDown">
<h2><a href="#">Menu Heading Goes Here</a></h2>
<ul>
<li><a href="#">Menu Item 1 Goes Here</a></li>
<li><a href="#">Menu Item 2 Goes Here</a></li>
<li><a href="#">Menu Item 3 Goes Here</a></li>
<li><a href="#">Menu Item 4 Goes Here</a></li>
</ul>
</div>
</li>
</ul>
</div>
CSS:
.menu {
list-style-type: none;
border-spacing:3px 0px;
padding: 0px;
display: table;
margin: 5px 0px 0px;
text-align:center;
height: 26px;
width: 300px;
}
.menuTab {
background-color: #D2DCE0;
display: table-cell;
position: relative;
margin:0px 5px 0px 0px;
padding:6px 0px;
font-size: 15px;
width: auto;
cursor: default;
border-bottom: 0px;
color: #002F68;
}
.menuTab:hover {
background-color:#93B4D6;
color: white;
}
.menuTab:hover .menuDropDown {
left:0px; /* Shows the dropdown div */
}
.menuDropDown {
background-color:#EBECEF;
border:1px solid #6798CF;
position: absolute;
left:-999em; /* Hides the dropdown until menuTab mouseover */
margin-top: 5px;
z-index: 1;
display: block;
}
.menuDropDown ul {
list-style-type: none;
margin:0px;
padding:0px;
margin-left: 20px;
margin-bottom: 20px;
text-align: left;
}
.menuDropDown h2 {
font-size:14px;
margin-left: 18px;
margin-bottom: 5px;
font-weight: normal;
text-align: left;
}
.menuDropDown h2 a {
color: black;
}
.menuDropDown li {
font-size:14px;
padding:0px;
margin-left: 10px;
}
.menuDropDown li a {
}
.menuDropDown li:hover {
background-color: #EBECEF;
}
.menuLastTab {
margin-right: 0px;
}