Question

I have been trying to make the sub-menu horizontal.

In my HTML it looks like this:

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#" class="selected">About Us</a>
        <!-- I want to make this horizontal -->
        <ul id="subnav">
            <li><a href="#">Item 01</a></li>
            <li><a href="#" class="selected">Item 02</a></li>
            <li id="nav_last"><a href="#">Item 03</a></li>
        </ul>
        <!-- End here -->
    </li>
 </ul>

My CSS for the List is like this:

/* remove the list style */
#nav {
    margin:0; 
    padding:0; 
    list-style:none;
}   

/* make the LI display inline */
/* it's position relative so that position absolute */
/* can be used in submenu */
#nav li {
    float:left; 
    display:block; 
    width:100px; 
    background:#d90000; 
    position:relative;
    z-index:500; 
    margin:0 1px;
}

/* this is the parent menu */
#nav li a {
    display:block; 
    /*padding:8px 5px 0 5px; */
    padding-top: 11px;
    font-weight:normal;  
    height:30px; 
    text-decoration:none; 
    text-align:center; 
    color:#f8e2e2;
}

#nav li a:hover {
    color:#f8e2e2;
    background-color: #bf0000;
    border-left: 1px solid #a50000;
    border-right: 1px solid #a50000;
}

#subnav {
    position:absolute; 
    left:0; 
    display:none; 
    margin: 0 0 0 0;
    padding:12px 0 0 0; 
    list-style:none;
    background-image: url('../images/arrow_down.png');
    background-repeat: no-repeat;
}

#subnav li{
    font-size: 0.9em;

    border-top:1px solid #a50000;
    border-left:1px solid #a50000;
    border-right:1px solid #a50000;

    position:relative;
    width:98px; 
    display:block; 
    float:left;
}

And I am using jQuery to show/hide the sub-List. My problem is that the sub-menu is not horizontal. What changes do I need to make on my CSS for the sub-menu to become horizontal? I have spent hours without any success.

Thanks so much!

Answer 1

Set a wide width on #subnav, e.g.

#subnav {
    width: 600px;
}