Question

我尝试在不使用links（）的情况下实现简单的dropdownmenu。它是基于列表的。我的列表元素 - 宽度与所有值一起达到100％。我的最后一个元素突破了我不理解的新界限。也许这与我的保证金有关..

提前致谢。

以下是我的代码的链接：

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)

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

Answer 2

元素区域的总和是边距，填充和边框的总和。

请参阅http://www.w3.org/TR/CSS2/box.html

您必须在计算中包含每个边距的四个像素。

CSS下拉菜单问题

2 个答案: