I am currently working on a dynamic mega drop-down menu using only HTML and CSS. The issue I'm facing is that when I select one of the list items (LIs), it expands in size at the expense of the other LIs.
I'm not sure where the problem lies, so I was hoping to get some suggestions on how to fix this.
HTML
<div id="wrapper">
<div id="menu2">
<ul id="menu2_ul">
<li class="list"><a href="#">Home</a>
<div class="sub">
<div class="submenu">
<ul class="submenu_left_menu">
<li><a href="#">Home</a></li>
<li><a href="#">Insurance</a></li>
<li><a href="#">Loans</a></li>
<li><a href="#">Mortgages</a></li>
<li><a href="#">Accounts & Savings</a></li>
<li><a href="#">Energy</a></li>
<li><a href="#">Investments</a></li>
<li><a href="#">Discounts</a></li>
</ul>
</div>
<div class="submenu_content">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<div class="submenu_poll">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
</div>
</li>
<li class="list"><a href="#">Insurance</a>
<div class="sub">
<div class="submenu">
<ul class="submenu_left_menu">
<li><a href="#">Home</a></li>
<li><a href="#">Insurance</a></li>
<li><a href="#">Loans</a></li>
<li><a href="#">Mortgages</a></li>
<li><a href="#">Accounts & Savings</a></li>
<li><a href="#">Energy</a></li>
<li><a href="#">Investments</a></li>
<li><a href="#">Discounts</a></li>
</ul>
</div>
<div class="submenu_content">
</div>
<div class="submenu_poll">
</div>
</div>
</li>
</div>
</div>
CSS
body {
background-color: black;
padding: 0px;
margin: 0px;
}
#wrapper {
margin: 0px;
padding: 0px;
height: 40px;
background-color: white;
}
#menu2 {
width: 981px;
margin: 0 auto;
padding: 0px;
}
#menu2 ul {
list-style: none;
display: table;
margin: 0px;
padding: 0px;
height: 40px;
}
#menu2 li.list {
display: table-cell;
line-height: 40px;
border-left: 1px solid grey;
position: relative;
}
#menu2 div.sub {
margin:0;
display:none;
background-color: white;
}
#menu2 li.list:hover div.sub {
display: block !important;
width: 981px !important;
}
/******************************************************************************\
\******************************************************************************/
#menu2 div.sub .submenu {
float: left;
width: 220px;
}
#menu2 div.sub .submenu_content {
width: 550px;
float: left;
}
#menu2 div.sub .submenu_poll {
}