title: sub nav problems
body: <p>I'm having some trouble getting my drop down menu to work. When you rollover the menu the 'drop-down' menu opens but it moves the content of the main menu, pushing it out of the way. Id there something I'm missing, this is driving me crazy trying to solve this! Please help!</p>
  
  <p>CSS:</p>
  
  <pre><code>ul#topnav {
  list-style: none; 
  float: right;
  width: 978px; 
  border: solid #blue 1px;
  }
  
  ul#topnav li {
  float: right;
  display: inline;
  }
  
  ul#topnav li a {
  float: right;
  height: 20px;
  padding: 0 15px;
  font-family: GillSansStd-light, Arial, Helvetica, sans-serif;
  color: #fff;
  font-size: 13px;
  text-decoration: none; 
  text-transform: uppercase;
  }
  
  ul#topnav li a:hover {
  background: #;
  color: #ef5a53;
  position: relative;
  }   
  
  ul#topnav li a:active, ul#topnav li a.current {
  color: #000;
  }
  
  ul#topnav li span {
  display:none;
  color:#ef5a53;
  }
  
  ul#topnav li span a { 
  width: 70px;
  height: 10px;
  padding: 5px 6px 5px;
  background: #ef5a53;
  font-family: GillSansStd-LightItalic, Arial, Helvetica, sans-serif;
  font-color: #FFFFFF;
  font-size:8pt;
  }
  
  ul#topnav li span a:hover {
  text-decoration: none; 
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul id="topnav"&gt;
      &lt;li class="tab1"&gt;&lt;a href="page1.html"&gt;TAB1&lt;/a&gt;&lt;/li&gt;
      &lt;li class="tab2"&gt;&lt;a href="page2.html"&gt;TAB2&lt;/a&gt;&lt;/li&gt;
      &lt;li class="tab3"&gt;&lt;a href="page3.html"&gt;TAB3&lt;/a&gt;&lt;/li&gt;
      &lt;li class="tab4"&gt;&lt;a href="page4.html"&gt;OUR CLIENTS&lt;/a&gt;&lt;/li&gt;
      &lt;li class="tab5"&gt;&lt;a href="#"&gt;OUR WORK&lt;/a&gt;
          &lt;span&gt;
          &lt;table width="144" height="24" border="0" cellpadding="0" cellspacing="0"&gt;
          &lt;tr&gt;
          &lt;td width="58"&gt;&lt;a href="page1.html"&gt;&lt;img src="images/image1.png" width="58" height="24"&gt;&lt;/a&gt;&lt;/td&gt;
          &lt;td width="86"&gt;&lt;a href="page2.html"&gt;&lt;img src="images/image2.png" width="86" height="24"&gt;&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/table&gt;
          &lt;/span&gt;
      &lt;/li&gt;
      &lt;li class="tab6"&gt;&lt;a href="page6.html"&gt;TALK TO US&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p></p>