change menu layout

Question

I'm using the following css for a horizontal menu, when a user hovers over a menu item, the list items are displayed vertically. I want to modify the css so that my second layer list items display horizonally under the main menu items. any input would be appreicated. thanks.

html -------

 <div id="topnav">

      <ul>


        <li><a href="#">Info</a><span></span>
          <ul>


            <li><a href="../test.htm">a</a></li>
            <li><a href="../test.htm">b</a></li>         
             <li><a href="../test.htm">c</a></li>

            <li><a href="../test.htm">d</a></li>

                  </ul>
          </li>




            <li><a href="#">test2</a><span></span>
          <ul>
           <li><a href="../test.htm">atest</a></li>
            <li><a href="../test.htm">btest</a></li>

          </ul>
        </li>

        <li><a href="../test.htm">test3</a </li>

     <li class="active"><a href="../index.htm">Home</a></li>


      </ul>

    </div>

css --------

#topnav{
    margin-top: 22px;
    margin: 0 0 0 0;
    display: block;
    float: right;
    width: 580px;
    font-size: 12px;
    font-family: Georgia, "Times New Roman", Times, serif;
}

#topnav ul, #topnav li{
    margin:0;
    padding:0;
    list-style:none;




    }

#topnav li{
    float:right;
    margin-right:30px;



    }

#topnav li li{
    margin-right:0;



    }

#topnav li span{
    display:block;
    margin:5px 0 0 0;
    padding:0;
    font-size:12px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    text-transform:lowercase;
    color:#666666;
    background-color:#000000;
    font-weight:normal;
    line-height:normal;



    }

#topnav li a:link, #topnav li a:visited, #topnav li a:hover{
    display:block;
    margin:0;
    padding:10px 0 0 0;
    color:#FFFFFF;
    background-color:#000000;
    text-transform:uppercase;
    border-top:2px solid #000000;
    font-weight:bold;



    }

#topnav ul ul li a:link, #topnav ul ul li a:visited{
    border:none;



    }

#topnav li a:hover, #topnav li.active a{
    color:#009999;
    background-color:#000000;
    border-top-color:#FFFF00;



    }

#topnav li li a:link, #topnav li li a:visited{
    width:150px;
    float:none;
    margin:0;
    padding:3px 3px;
    font-size:12px;
    font-weight:normal;
    color:#FFFFFF;
    background-color:#000000;
    border:none;



    }

#topnav li li a:hover{
    color:#009999;
    background-color:#000000;



    }

#topnav ul ul{
    z-index:9999;
    position: absolute;
    left:-999em;
    height:auto;
    width:170px;
    border-left:1px solid #666666;
    border-bottom:1px solid #666666;



    }

#topnav ul ul a{width: 140px;}

#topnav li:hover ul{left: auto;}

#topnav li:hover{position: static;}

#topnav li.last{margin-right:0;}

Answer 1

is your code currently working on IE. However in firefox i just added display:inline property to your second level of LI's to show them horizontally.