title: How to add a third level to my CSS drop down menu
body: <p>I have an existing CSS that only shows a two level menu. I want to add a third level but I'm out of ideas. Could soeone please assist me on what i need to add to the CSS. Below is the current code.</p>
  
  <pre><code>#topnav{
      display:block;
      float:left;
      //width:660px;
      margin:0;
      padding:0;
      list-style:none;
      font-size:10px;//was 13
      font-weight:normal;
      font-family:Verdana, Arial, Helvetica, sans-serif;
      color:#FFFFFF;
      background-color:#000000;
  }
  
  #topnav ul, #topnav li{
      float:left;
      list-style:none;
      margin:0;
      padding:0;
  }
  
  #topnav li a:link, #topnav li a:visited, #topnav li a:hover{
      display:block;
      margin:0;
      padding:15px 20px;
      color:#FFFFFF;
      background-color:#000000;
  }
  
  #topnav ul ul li a:link, #topnav ul ul li a:visited{
      border:none;
  }
  
  #topnav li.last a{
      margin-right:0;
  }
  
  #topnav li a:hover, #topnav ul li.active a{
      color:#FFFFFF;
      background-color:#059BD8;
  }
  
  #topnav li li a:link, #topnav li li a:visited{
      //width:150px;
      float:none;
      margin:0;
      padding:7px 10px;
      font-size:12px;
      font-weight:normal; 
      color:#FFFFFF;
      background-color:#000000;
  }
  
  #topnav li li a:hover{
      color:#FFFFFF;
      background-color:#059BD8;
  }
  
  #topnav li ul{
      background:#FFFFFF;
      z-index:9999;
      position:absolute;
      left:-999em;
      height:auto;
      width:170px;
      border-left:1px solid #FFFFFF;
      border-bottom:1px solid #FFFFFF;
  }
  
  #topnav li ul a{width:140px;}
  
  #topnav li ul ul{margin:-32px 0 0 0;}
  
  #topnav li:hover ul ul{left:-999em;}
  
  #topnav li:hover ul, #topnav li li:hover ul{left:auto;}
  
  #topnav li:hover{position:static;}
  
  #topnav li.last a{margin-right:0;}
  </code></pre>
  
  <p>Here is the HTML</p>
  
  <pre><code>&lt;div id="topnav"&gt;
      &lt;ul&gt;
          &lt;li &lt;?php if($menu== 0) { echo  "class='active'"; } ?&gt;&gt;
              &lt;a href="index.php"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="last"&gt;
              &lt;a href="#"&gt;Set Up&lt;/a&gt;
          &lt;li class="last"&gt;
              &lt;a href="#"&gt;EMR&lt;/a&gt;
          &lt;ul&gt;
              &lt;li class="last" &gt;
                  &lt;a href="#"&gt;Out-Patient&lt;/a&gt;
              &lt;/li&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Registration&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;File Edition&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;li&gt;&lt;a href="InpatientAdmission.php"&gt;In-Patient&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The two sub-menus under out-patient (Registration &amp; File Edition) are not showing.</p>
  
  <p>Thanks.</p>