title: 2 Level CSS Drop Down Menu - display: none Does not Work
body: <p>I have designed a 2-Level CSS drop down menu. Everything works perfect except only one thing. I want it so that when I hover over the top menu item, the 1st level drop down menu appears and when I hover over the item <strong>Press</strong> in the 1st level menu then the 2nd level menu items appear. But the problem is that when I hover over the top menu all sub-menus appear altogether. That means the <code>display: none</code> does not work. Why does it happen and what is the solution? </p>
  
  <p><a href="http://jsfiddle.net/infinity/2J4e3/" rel="nofollow">jsfiddle.net</a></p>
  
  <p>HTML Code</p>
  
  <pre><code>&lt;ul id="nav"&gt;
   &lt;li&gt;&lt;a href="/ueber_uns.htm"&gt;About Us&lt;/a&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Who We Are&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Our Goals&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Our Team&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Press&lt;/a&gt;
       &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;2006&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;2007&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;2008&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
      &lt;/li&gt;
     &lt;li&gt;&lt;a href="#"&gt;Impressum&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
   &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS Code</p>
  
  <pre><code>ul#nav 
  {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  /*display: table-cell;
  vertical-align: middle;*/
  }
  ul#nav li
  {
  float: left;
  position: relative;
  font-size: 16px;
  background-color: orange;
  }
  ul#nav li li
  {
  font-size: 14px;
  }
  ul#nav ul 
  {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
  display: none;
  }
  ul#nav li:hover ul 
  {
  display: block;
  position: absolute;
  }
  ul#nav a:link, ul#nav a:visited
  {
  display: block;
  width: 110px;
  padding: 10px 5px;
  text-decoration: none;
  color: #000;
  }
  ul#nav ul a:link, ul#nav ul a:visited 
  {
  width: 135px;
  }
  ul#nav a:hover, ul#nav a:active
  {
  color: #fff;
  }
  ul#nav ul ul
  {
  position: absolute;
  top: 0;
  left: 100%;
  display: none;
  }
  ul#nav ul li:hover ul
  {
  display: block;
  }
  </code></pre>