title: Horizontal sub menu issue
body: <p>I am facing a problem regarding horizontal submenu that needs to push down body content. But I am not getting it. I have tried out few things with different css. And I want to be done using CSS since it would be a responsive menu with 100% div. So I can't give any pixel width in sub ul. I have almost done it but main menu got push down when I hover on it. I know there might be a solution for this using CSS code and it would be great if someone can help me out on this. And if its can't be done with CSS then I would like to know if there is any jquery solution for it or not. Here I am sharing my CSS along with HTML.</p>
  
  <p>""There are 3 menus in the given css and html and also you can see it in jsfiddle link as well that Menu 1 and Menu 2 submenu along with Body Content got push down but Menu 3 is working fine. I want to fix the Menu 1 and Menu 2 just like the Menu 3."" </p>
  
  <p>Any help would be appreciated.</p>
  
  <p>Thanks, Roy</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="menu"&gt;
  
      &lt;ul id="nav"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;fdesfc&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;drgdrg&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;dgvdvg&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
  
      &lt;li&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;iuoluiouo&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;abcde&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;bhnhbnh&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
  
      &lt;li&gt;&lt;a href="#"&gt;Menu 3&lt;/a&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Menu 3 Submenu item 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Menu 3 Submenu item 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Menu 3 Submenu item 3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
      &lt;/ul&gt;
  
  &lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;div class="contArea"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#menu{
  width: 100%;
  height: 40px;
  clear: both;
  }
  
  ul#nav {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #dc0000;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
  }
  
  ul#nav li {display: inline;}
  
  ul#nav li a {
  float: left;
  font: bold 1.1em arial, verdana, tahoma, sans-serif;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #880000;
  margin: 0;
  padding: 0 30px;
  background: #dc0000;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
  }
  
  ul#nav ul {
  display: none;
  position: absolute;
  }
  
  ul#nav li:hover &gt; ul {
  position: relative;
  display: block;
  height: 45px;
  margin: 40px 0 0 0;
  background: #aa0000;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px;
  }
  
  ul#nav li:hover &gt; ul li a {
  float: left;
  font: bold 1.1em arial, verdana, tahoma, sans-serif;
  line-height: 45px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #110000;
  margin: 0;
  padding: 0 30px 0 0;
  background: #aa0000;
  }
  
  ul#nav li:hover &gt; ul li a:hover {
  color: #120000;
  text-decoration: none;
  text-shadow: none;
  }
  
  .clear {
  clear: both;
  }
  
  .contArea {
      background: #ccc;
  padding: 12px;
  }
  </code></pre>
  
  <p>(on JSFiddle: <a href="http://jsfiddle.net/indy12/QG9L5/1/" rel="nofollow">http://jsfiddle.net/indy12/QG9L5/1/</a>)</p>