css - CSS下拉菜单问题

我尝试了不使用链接（）的简单下拉菜单。
它是基于列表的。我的list elements-width带有procental值，总计为100％。我的最后一个元素换行了，这就是我不明白的地方。也许与我的利润有关。

提前致谢。

这是我的代码的链接：

Fiddle

的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;
}

亲切的问候！

最佳答案

您没有在计算中包括保证金

将宽度设置为calc(20% - 8px)

小提琴：http://jsfiddle.net/bjPrK/16/

关于css - CSS下拉菜单问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16281031/