子菜单水平对齐

Question

取得here is the menu，但是当你移动到主punkt1子菜单出现时，它开始并在punkt1 punkt4结束。通过点击punkt2或3子菜单向右移动。如何做，这将是一个子菜单总是固定在主菜单下，并没有移动？

我知道我可以打包.mainnav li：将ul悬停在div中或添加ul类，但是我可以修复此错误而无需插入div或添加类吗？

还有就是我的子菜单代码

.mainnav li ul{ 
    display: none; 
} 

.mainnav li:hover ul{ 
     display: block; 
    position: absolute; 
    width: 1000px; 
    margin: 0 auto; 
} 

.mainnav li:hover ul li{ 
    display: inline-block; 
    vertical-align: top; 
    width: 210px; 
    margin: 10px 10px 10px 10px; 
    height: 60px; 

} 

.mainnav li:hover ul li a{ 

    display: inline-block; 

    color: #000; 
    padding: 15px 0px 18px 0px; 

    border: 1px solid rgba(0,0,0,.1); 
    border-radius: 2px; 
    background: rgb(245,245,245) linear-gradient(#e1e1e1, #dadada); 
    vertical-align: middle; 
} 

Answer 1

使用绝对位置

.mainnav {position: relative;} 
.mainnav > li > ul {position: absolute; top: 50px; left: 0;} 

http://jsfiddle.net/pmng54gb/12/

对于第三级这将是类似的。