0

我尝试在不使用链接 ( ) 的情况下实现一个简单的下拉菜单。它是基于列表的。我的列表元素宽度与 procentual 值一起达到 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;
}

亲切的问候!

4

2 回答 2

0

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

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

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

于 2013-04-29T14:24:03.933 回答
0

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

http://www.w3.org/TR/CSS2/box.html

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

于 2013-04-29T14:29:34.873 回答