Составление списка <ul>одинаковой высоты. - PullRequest
Новая
       4

Составление списка <ul>одинаковой высоты.

0 голосов
/ 01 декабря 2011

Есть ли конкретный способ сделать <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>, которые парили на одной высоте. Пойдите в зависимости от того, что содержание в них.

Я хочу, чтобы все меню были одинаковой высоты или находились в оболочке фиксированной высоты / ширины.

1 Ответ

1 голос
/ 01 декабря 2011

это решает ваш вопрос?

ul { height: 150px; }

если вы примените это, все ваши ульы будут иметь высоту 150 пикселей.

Edit

Ну, выиспользуя плавающий.Плавающие элементы игнорируются в потоке документа.Чтобы преодолеть эту проблему, вы должны добавить overflow: hidden; к вашему ul.dropdown

...