Question

I am trying to make the drop down menu lists display inline(horizontally) but end up vertically. If I set the ul_dropdown width to 600px or so, it’ll do the result I want. However, I want it to do it without me setting the width. Here’s my simplified html/css:

<style type="text/css">
#menu {
 list-style:none; 
}

#menu .item{
 display:inline;
 position:relative;
 float:left; 
 width:100px;
 height:20px;
 text-align:center;
}

#menu .item .ul_dropdown{
    position:absolute;
 float:left;
    left:-999em;
 list-style:none;
 margin:0px;
 padding:0px;
 border:2px solid red;

}

#menu .item .ul_dropdown li h3{
 margin:0px;
 padding:0px;
}

#menu .item .ul_dropdown li{
 display:inline;
 position:relative;
 float:left;
 list-style:none; 
 margin-right:1px;
}

#menu .item .ul_dropdown li ul{
 display:inline!important;
 position:relative;
 float:left;
 padding:0px;
 margin:0px;
 width:200px;
}

#menu .item .ul_dropdown li ul li{
 border:1px solid blue;
 width:200px;
 height:22px;
}

#menu .item:hover{
 background-color:red; 
}

#menu .item:hover .ul_dropdown {
 left:0px;
 top:auto;
}

#menu .item:hover .ul_dropdown li
{
 display:inline;
 width:200px;
}

</style>
<ul id="menu">
 <li class="item">Main
    <ul class="ul_dropdown">
     <li><h3>Sales</h3>
         <ul>
             <li>Sales Sample 1</li>
                <li>Sales Sample 2</li>
                <li>Sales Sample 3</li>
            </ul>
        </li>
     <li><h3>Invoice</h3>
         <ul>
             <li>Invoice Sample 1</li>
                <li>Invoice Sample 2</li>
            </ul>
     </li>
     <li><h3>Deal</h3>
         <ul>
             <li>Deal Sample 1</li>
                <li>Deal Sample 2</li>
                <li>Deal Sample 3</li>
            </ul>
     </li>        
    </ul>

    <li class="item">1st Menu
    </li>

    <li class="item">2nd Menu
    </li>

    <li class="item">3rd Menu
    </li>
</ul>

Answer 1

Use display:inline-block; and/or float:left; for your li’s. Has to work!