title: Css display submenu on menu item hover
body: <p>I have a menu where each menu item has a background image, when hovering over a menu item it is underlined by scrolling up the corresponding background image. Now I also want to display the submenu(with text items, no background image), but the submenu text isn't diplayed , if I set the border of the submenu I can see a rectangle with no proper content. I don't see what's wrong with the code, please help me correct (and improve) it.</p>
  
  <p>//html structure</p>
  
  <pre><code>&lt;div id="menu_top"&gt;
              &lt;ul id="menu"&gt;
                  &lt;li class="home"&gt;&lt;a href="#" class="home"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="menu"&gt;&lt;a href="#" class="menu"&gt;Menu&lt;/a&gt;
                      &lt;ul class="submenu"&gt;
                              &lt;li&gt;item1&lt;/li&gt;
                              &lt;li&gt;item2&lt;/li&gt;
                              &lt;li&gt;item3&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li class="contact"&gt;&lt;a href="#" class="contact"&gt;Contacts&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="about"&gt;&lt;a href="#" class="about"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>//css styles</p>
  
  <pre><code>#menu_top
  {
    margin: 0 auto; 
    text-align: center;
    background: url(../images/nav-bg.jpg) no-repeat 0 0;
    height: 150px;
        width: 815px;
  }
  
  ul#menu
  {   
     list-style: none;
     margin: 0;
     position: relative;
  }
  
  ul#menu li 
  {
     background-position: left top;
     background-repeat: no-repeat;
     display: block;
     text-indent: -9000px;
     position: absolute;
     outline: none;
  }
  
  /*Menu items*/
  
  // all menu items similar to this ...
  
  ul#menu li.menu
  {
     background-image: url(../images/nav-menu.png);
     height: 50px;
     width: 116px;
     top: 30px;
     left: 380px;
  }
  
  
  /* underline menu items*/
  ul#menu li:hover
  {
     background-position: left bottom;
  }
  
  #menu &gt;li ul
  {
     position:absolute;
     left:0px;
     top:50px;
     width:100%;
  }
  
  #menu &gt;li ul&gt;li
  {
     list-style:none; 
  }
  
  #menu &gt;li:hover &gt; ul
  {
     display:block;
  }
  </code></pre>