Menu Items Move Around On Hover

Question

I recently submitted another question, which was answered on creating a menu like the one at RackSpace and when I use the code as below:

   == CSS ==

    .main > li{
        float: left;
        padding: 5px;
    }


    .sub li {
        height: 30px;
        background-color: black;
        width: 1000px;
        display: none;
    }

    .main > li:hover .sub li {
        display: block;
    }

   == HTML ==

    <ul class="main">
    <li>
    Hosting
    <ul class="sub">
    <li>cPanel Hosting Solutions</li>
    <li>cPanel Reseller Solutions</li>
    <li>Plesk Hosting Solutions</li>
    <li>Plesk Reseller Solutions</li>
    </ul>
    </li>
    <li>
    Menu 2
    <ul class="sub">
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
    <li>Sit</li>
    <li>Amet</li>
    </ul>
    </li>
    <li>
    Menu 3
    <ul class="sub">
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
    <li>Sit</li>
    <li>Amet</li>
    </ul>
    </li>
    <li>
    Menu 4
    <ul class="sub">
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
    <li>Sit</li>
    <li>Amet</li>
    </ul>
    </li>
    </ul>

This of course needs styling, but my main point is that when hovering over a menu item, it seems to move the following items over. How can I make it not move the following menu items over? An example of what I mean can be found at this link.

Thanks in advance,

Scott

Answer 1

Just add a position: absolute to your submenu items.

http://jsfiddle.net/hA4RE/