菜单项上四处移动哈弗

Question

我最近提交了另外一个问题，这是在RackSpace回答打造像一个菜单，当我用下面的代码：

      == == 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> 

这当然需要样式，但我的主要观点是，当将鼠标悬停在菜单项上时，它似乎将以下项目移到了上面。我怎样才能让它不移动以下菜单项？我的意思的一个例子可以找到at this link。

由于提前，

斯科特

Answer 1

只需添加一个position: absolute到您的子菜单项。

http://jsfiddle.net/hA4RE/