CSS: горизонтальная проблема подменю

Question

Я пытался сделать подменю горизонтальным.

В моем HTML это выглядит так:

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

Мой CSS для списка выглядит так:

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

И я использую jQuery, чтобы показать / скрыть подсписок. Моя проблема в том, что подменю не горизонтальное. Какие изменения мне нужно внести в мой CSS, чтобы подменю стало горизонтальным? Я провел часы без какого-либо успеха.

Большое спасибо!

Answer 1

Установить ширину на #subnav, например,

#subnav {
    width: 600px;
}

Answer 2

#subnav li элементы должны быть "display:inline" вместо блока.

Кроме того, увеличьте ширину ul, как указано в другом ответе.