CSS下拉菜单问题

Question

我尝试在不使用链接 ( ) 的情况下实现一个简单的下拉菜单。它是基于列表的。我的列表 elements-width 的概率值加在一起达到 100%。我的最后一个元素在一个新行中爆发，这是我不明白的。也许这与我的 margin 有关..

提前致谢。

这是我的代码的链接:

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

亲切的问候!

Answer 1

您没有在计算中包括您的利润

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

fiddle :http://jsfiddle.net/bjPrK/16/