<p>Given this HTML:</p>

<pre><code>&lt;ul id="topnav"&gt;
    &lt;li id="topnav_galleries"&gt;&lt;a href="#"&gt;Galleries&lt;/a&gt;&lt;/li&gt;
    &lt;li id="topnav_information"&gt;&lt;a href="#"&gt;Information&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>And this CSS:</p>

<pre class="lang-css prettyprint-override"><code>#topnav_galleries a, #topnav_information a {
    background-repeat: no-repeat;
    text-indent: -9000px;
    padding: 0;
    margin: 0 0;
    overflow: hidden;
    height: 46px;
    width: 136px;
    display: block;
}
#topnav { list-style-type: none; }
#topnav_galleries a { background-image: url('image1.jpg'); }
#topnav_information a { background-image: url('image2.jpg'); }
</code></pre>

<p>How would I go about turning the <code>topnav</code> list into an inline list?</p>

Try this:
```
```
#topnav {
    overflow:hidden;
}
#topnav li {
    float:left;
}
```
```
And for IE you will need to add the following:
```
```
#topnav {
    zoom:1;
}
```
```
Otherwise your floated < li > tags will spill out of the containing < ul >.