title: CSS only drop down menu
body: <p>I am trying to make CSS drop down menu (no javascript involved). According to 
  <a href="http://pixelspread.com/blog/289/css-drop-down-menu" rel="nofollow noreferrer">http://pixelspread.com/blog/289/css-drop-down-menu</a>  I only need to add </p>
  
  <pre><code>#menuBar #test2 a:hover .subMenu{display:block;}   
  </code></pre>
  
  <p>to make the sub menu show up. However, in my code, it doesn't work. Could someone help me about this issue? Thanks a lot!</p>
  
  <p>My html</p>
  
  <pre><code>&lt;ul id="menuBar"&gt;
     &lt;li id="test1"&gt;test1&lt;/li&gt;
     &lt;li id="test2"&gt;&lt;a href="#"&gt;Pro1&lt;/a&gt;
       &lt;div class="subMenu"&gt;
          &lt;ul&gt;
             &lt;li&gt;&lt;a href="#"&gt;sub1&lt;/a&gt;&lt;/li&gt;  
             &lt;li&gt;&lt;a href="#"&gt;sub2&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;sub3&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
           &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Volleyball&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Walking&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Water Shoes&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
         &lt;/div&gt; &lt;!--end of submenu--&gt;
       &lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>My Css</p>
  
  <pre><code> #menuBar #test2 a{
  background:url("../images/btTest.jpg") no-repeat bottom;
  display:block;
  border-right:1px solid #ffffff;
  width:112px;
  height:37px;
  }
  
  #menuBar #test2 a:hover{
  background:url("../images/btTest.jpg") no-repeat top;
  }
  
  #menuBar #test2 a:hover .subMenu{  
  // I add .subMenu after a:hover and have two a:hover for #test2 a
  // I know it won't work but not sure what to do now.
  //thanks for the help.
  display:block;
  }
  
  
  .subMenu{  // the hidden menu
  position:absolute;
  top:35px;
  left:0px;
  z-index: 99999;
  width:550px;
  background-color:black;
  display:none;
  }
  </code></pre>