Question

我一直在研究基于CSS的下拉菜单，我希望它能够将顶部按钮均匀地分布在其容器中。我已经找到了一些不同的解决方案，可以在水平方向均匀地展开项目，但是我尝试过的那些解决方案被我需要放在顶部的项目上，以便在Firefox中使用下拉列表。

所以我的问题是：

是否有一种传播水平项目的方法，即使这些项目是浮动的？

或

是否有一个解决方案可以让Firefox中的下拉菜单无需浮动？

这是导航栏的（某种程度上）简化的JSFiddle的链接：http://jsfiddle.net/erynamrod/wPJ23/3/

HTML：

<ul class="topper">
    <li class="top"><a href="/" class="tlink">Top 1</a></li>
    <li class="top"><a href="/" class="tlink">Top 2</a>
        <ul class="hidden">
            <li><a href="/" class="dir">Dropdown 2.1</a>
            <ul class="hidden2">
                <li><a href="/" class="dir">Dropdown 2.1.1</a></li>
                <li><a href="/" class="dir">Dropdown 2.1.2</a></li>
                <li><a href="/" class="dir">Dropdown 2.1.3</a></li>
             </ul>
        </li>
        <li><a href="/" class="dir">Dropdown 2.2</a></li>
      </ul>
</li>
<li class="top"><a href="/" class="tlink">Top 3</a>
    <ul class="hidden">
        <li><a href="/" class="dir">Dropdown 3.1</a></li>
        <li><a href="/" class="dir">Dropdown 3.2</a></li>
    </ul>
</li>
</ul>

CSS：

.topper {
font-family: Verdana, sans-serif;
width: 100%;
padding: 0%;
display:table;
text-align:center;
z-index:5;
 }

.top {
display: table-cell;
margin-left: 10px;
padding:1%;
position:relative;
 /* float:left;
This float is necessary for the dropdowns to work in Firefox, 
but it breaks the table/table-cell display that spreads the .top */
}

/* Everything below here is, I think, relatively unrelated to my current problem */ 

.topper > li:hover {
background-color:#6dcff6;
}

.hidden > li:hover {
background-color:#6dcff6;
padding-right:0;
margin:0;
}

.hidden2 > li:hover {
background-color:#6dcff6;
}

.topper > li:hover > a:link {
color:#fff;
}

.dir {
text-decoration:none;
color:#fff;
margin-right: 15px;
}

.tlink {
text-decoration:none;
color:#6dcff6;
display:block;
}

li {
white-space: nowrap;    
}

.hidden, .hidden2 {
position:absolute;
display:none;
list-style: none;
margin:0;
padding:0;
text-align:left;
background-color:#333;
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
left:0px;
}

.hidden > li {
padding:5% 0% 5% 5%;
width: 100%;    
}

.hidden2 > li {
padding:5%;
size: 1em;    
}

.hidden {
top:100%;
left:0%;
}

.hidden2 {
left: 100%;
top: 0%;
}

ul > li:hover > ul {
display: list-item;
}

Answer 1

试试这个

.top {
    display: table-cell;
    margin-left: 10px;
    padding:1%;
    position:relative;
    float:left;
    width:25%;
}

传播按钮的水平下拉菜单

1 个答案: