CSS下拉菜单问题

我试着实现一个简单的dropdownmenu而不使用链接（）。它是基于列表的。我的列表元素宽度与所有的百分比一起达到100％。我的最后一个元素出现在我不明白的新行中。也许这与我的利润有关..CSS下拉菜单问题

在此先感谢。

这里是我的代码的链接：

HTML

<div class="dropDown-menu-container"> 
<ul class="dropDownMenu"> 
    <li style="width: 20%;"> 
     Initiating 
     <ul> 
      <li>punkt</li> 
      <li>punkt</li> 
     </ul> 
    </li> 
    <li style="width: 20%;"> 
     Planning 
     <ul></ul> 
    </li> 
    <li style="width: 40%;"> 
     Monitoring and Controlling 
     <ul></ul> 
    </li> 
    <li style="width: 20%;"> 
     Closing 
     <ul></ul> 
    </li> 
</ul>

CSS

.dropDown-menu-container { 
position:relative; 
width:100%; 
float:none; 
clear:both; 
display:inline; 
text-align:center; 
} 
ul { 
    position:relative; 
    float:left; 
    width:100%; 
    font-size: 14px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
ul li { 
    display: block; 
    text-align:center; 
    height:50px; 
    margin:4px; 
    box-shadow:0px 0px 2px 2px grey; 
    background-color:grey; 
    position: relative; 
    float: left; 
} 
ul li:hover { 
    background-color:lightgrey; 
} 
li ul { 
    display: none; 
} 
li { 
    position: absolute; 
    height:50px; 
    margin-bottom:5px; 
    top:0px; 
} 
li:hover ul { 
    display: block; 
    top:32px; 
} 
li:hover li { 
    float: none; 
    font-size: 11px; 
}

健问候！

来源

2013-04-29 marius