Question

Is there a particular way to make a <ul> a height? I have this structure:

<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;
}

I having trouble making the <ul> that are hovered the same height. The go depending on what content is in them.

I want all the menus to be the same height, or within a wrapper of fixed height/width..

Answer 1

does this solve your question?

ul { height: 150px; }

if you apply this, all of your ul’s will have the height of 150 pixels.

Edit

Well, you’re using floating. Floating elements are ignored in the flow of the document. To overcome this problem you should add a overflow: hidden; to your ul.dropdown