CSS mega dropdown menu - html

Question

I am creating mega drop down menu. It is all done by HTML and CSS. My problem is that when you select one of LIs, it gets maximalized at the expense of the other LIs.
I do not know where should be the problem, could you give me a suggestion how to solve it?
HTML
<div id="wrapper">
<div id="menu2">
<ul id="menu2_ul">
<li class="list">Domů
<div class="sub">
<div class="submenu">
<ul class="submenu_left_menu">
<li>Domů</li>
<li>Pojištění</li>
<li>Půjčky</li>
<li>Hypotéky</li>
<li>Účty a spoření</li>
<li>Energie</li>
<li>Investice</li>
<li>Slevy</li>
</ul>
</div>
<div class="submenu_content">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat risus leo, id placerat massa malesuada in. Vestibulum venenatis diam vel cursus dignissim. Aenean ac leo nunc. Fusce erat mauris, commodo at faucibus non, eleifend id nibh. Aliquam non ligula dignissim, venenatis nisi in, lacinia velit. Maecenas pharetra urna metus, nec dictum mauris suscipit et. Donec posuere massa vitae magna tempus, eu interdum nulla consectetur. Mauris consequat fringilla turpis, eu venenatis felis viverra sed. Fusce a placerat lectus. Sed vel sem sodales, eleifend nunc ac, viverra felis. Donec egestas ante nec enim semper dictum. Aenean mollis sodales lorem, sed pharetra leo sollicitudin id. Cras nulla neque, gravida nec rutrum sed, mattis quis nisl. Duis vulputate tempus diam eget tincidunt. Nunc elementum eu ante iaculis laoreet.</p>
</div>
<div class="submenu_poll">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat risus leo, id placerat massa malesuada in. Vestibulum venenatis diam vel cursus dignissim. Aenean ac leo nunc. Fusce erat mauris, commodo at faucibus non, eleifend id nibh. Aliquam non ligula dignissim, venenatis nisi in, lacinia velit. Maecenas pharetra urna metus, nec dictum mauris suscipit et. Donec posuere massa vitae magna tempus, eu interdum nulla consectetur. Mauris consequat fringilla turpis, eu venenatis felis viverra sed. Fusce a placerat lectus. Sed vel sem sodales, eleifend nunc ac, viverra felis. Donec egestas ante nec enim semper dictum. Aenean mollis sodales lorem, sed pharetra leo sollicitudin id. Cras nulla neque, gravida nec rutrum sed, mattis quis nisl. Duis vulputate tempus diam eget tincidunt. Nunc elementum eu ante iaculis laoreet.</p>
</div>
</div>
</li>
<li class="list">Pojištění
<div class="sub">
<div class="submenu">
<ul class="submenu_left_menu">
<li>Domů</li>
<li>Pojištění</li>
<li>Půjčky</li>
<li>Hypotéky</li>
<li>Účty a spoření</li>
<li>Energie</li>
<li>Investice</li>
<li>Slevy</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 {
}

Answer 1

1. Set the div.sub to absolute
Yes, they will not have the same starting position: so the solution is to manually give each one of them a margin-left minus value. You can either give them all and id, or use CSS3 selectors (e.g. #menu2:nth-child(1) {margin-left: -...}) .
Disadvantage: Manually specify an id and a specific margin-left for every div.sub + to make it easier you will probably have to give the menu tabs the same width.
2. Set the div.sub to fixed
In this case, every div will start at exactly the same position; however be careful that it's width or height aren't superior to another element, because the document won't stretch for fixed pos elements.
Disadvantage: Won't work if you have other divs after it because the fixed div will follow the screen. Won't work if no other elements are larger than the divs.sub IN the flow of the document.
3. Experiment with the CSS3 :target selector
Target selectors can modify the link in the href of an anchor. An Example here. However, you will have to specify id's for every div.sub. This selector also allows you to put all your div.sub's directly in your content section instead of nesting them for each menu item. Not compatible with IE8-.
Disadvantage: Not compatible with IE8-
4. Use js/jQuery instead
Probably the 'easiest' way for some, but also the most 'heavy' one.
Disadvantage: Heavier, won't work in JS-disabled browsers.