title: CSS for Nested Lists
body: <p>I am currently trying to create some nested lists to display the following...</p>
  
  <p>A...R...X
  <br>B...S...Y
  <br>C...T...Z</p>
  
  <p>(where the letters will eventually be replaced by words) and have made this work perfectly in chrome and firefox, however when I use Internet Explorer I get something resembling the following...</p>
  
  <p>A<br>
  B...R<br>
  C...S...X<br>
  ......T...Y<br>
  ...........Z</p>
  
  <p>I assume it's probably to do with the css, but please can someone help me with this problem, the html and css are shown below, thanks in advance for any help.</p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel=stylesheet href="lists in IE.css" type="text/css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="container"&gt;
  
      &lt;ul id="links-nav"&gt;
          &lt;li&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;A&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;B&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;C&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;L&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;M&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;N&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;X&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Y&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Z&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;       
          &lt;/li&gt;
  
      &lt;/ul&gt;
  
      &lt;div class="clear"&gt;&lt;/div&gt;   
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#container{
      width:940px; 
      margin:0px auto; 
      border: 1px solid #000;
      padding: 20px 10px; 
      height:auto; 
      font-family: Arial, sans-serif; 
      font-size:11px;
  }
  
  .clear {
      clear: both;
      height: 0;
      overflow: hidden;
  }
  
  
  a{
      text-decoration:none;
      color:#555;
  }
  
  #links-nav li, li ul li{
      list-style:none;
  }
  
  #links-nav{
      list-style-type: none;  
      margin:0px;
      padding:0px;
  }
  
  #links-nav li ul{
      float:left;
      width:168px;
      padding: 0px 10px;
      list-style-type: none;      
  }
  </code></pre>