Question

是否有特定方法使<ul>高度？我有这个结构：

<ul class="dropdown">
    <li></li>
    <li></li>  
    <li></li>
    <li>
         <ul id="sub_menu1"> // I have 4 of these
          <li></li> 
          <li></li>
         </ul>
    </li>
</ul>

CSS：

ul.dropdown {
    font-family: 'CapsuulaRegular', Arial, sans-serif;
    position: relative;
    padding: 0;
    margin: 0;
    z-index: 1;
}
ul.dropdown li a {
    color: #b38201;
    font-size: 18px;
}
ul.dropdown li {
    display: block;
    float: left;
    color: #b38201;
    font-weight: normal;
    text-transform: uppercase;
    padding: 38px 10px 12px 7px;
    margin-left: 2px;
}
ul.dropdown a:hover {
    color: #002565;
    background-image: url(../images/menu-hover.png);
    background-position: 50% 100%;
    background-repeat: no-repeat;
}
.navSelected {
    color: #002565;
    background-image: url(../images/menu-hover.png);
    background-position: 50% 100%;
    padding:0;
    margin:0;
    background-repeat: no-repeat;
}
ul.dropdown a:active {
    color: #ffa500;
}
ul.dropdown li a {
    padding: 38px 7px 12px 7px;
}
ul.dropdown li:last-child a {
    border-right: none;
} 
/* Doesn't work in IE */
ul.dropdown li.hover,  ul.dropdown li:hover {
    color: black;
    position: relative;
}
ul.dropdown li.hover a {
    color: black;
}
/* LEVEL TWO  */    
#sub_menu1 {
    width: 175px;
    position: absolute;
    left: -175px;
}
#sub_menu2 {
    width: 175px;
    position: absolute;
    left: 0px;
}
#sub_menu3 {
    width: 175px;
    position: absolute;
    left: 175px;
}
#sub_menu4 {
    width: 175px;
    position: absolute;
    left: 200px;
}
ul.dropdown ul {
    visibility: hidden;
    position: relative;
    top: 100%;
    left: 0px;
    font-size: 10px !important;
    padding: 0;
    margin: 0;
    display: block;
}
ul.dropdown ul li {
    background: #ccc;
}
ul.dropdown ul li {
    font-weight: normal;
    background: #f1f3f7;
    color: #000;
    /*border-bottom: 1px solid #ccc;*/
     float: none;
    padding: 10px;
    margin: 0;
    text-transform: none;
}

我无法使<ul>徘徊在相同的高度。 go取决于它们中的内容。

我希望所有菜单都具有相同的高度，或者在固定高度/宽度的包装中。

Answer 1

这可以解决你的问题吗？

ul { height: 150px; }

如果您应用此选项，则所有ul的高度均为150像素。

修改

嗯，你正在使用浮动。浮动元素在文档流中被忽略。要解决此问题，您应该在ul.dropdown中添加overflow: hidden;

使<ul>列表具有相同的高度。</ul>

1 个答案: