title: CSS Submenu background on hover
body: <p>I want to make a small website for myself and so I ask this question as a beginner. I cannot succeed to have the submenu contain another background when hovering the main menu. </p>
  
  <p>HTML: </p>
  
  <pre><code>        &lt;div id="nav"&gt;
              &lt;ul class="sub1"&gt;
                &lt;li&gt;&lt;a href="#"&gt;&lt;h2&gt;Home&lt;/h2&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;&lt;h2&gt;About&lt;/h2&gt;&lt;/a&gt;&lt;!---id="onlink"---&gt;
                  &lt;ul class="sub2"&gt;
                    &lt;li&gt;&lt;a href="#" title="About Us"&gt;Us&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" title="About Our product"&gt;Our product&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>#nav{
  width:100%;
  height: 60px;
  padding-top: 20px;
  padding-bottom: 10px;
  }
  
  #nav ul{
  margin:0;
  padding:0;
  width: 60%;
  margin: auto;
  
  }
  
  #nav ul li{
  margin:0;
  padding:0;
  list-style: none;
  float:left;
  position:relative;
  background:transparent url(EN/Button_menu_unselected.png);
  }
  
  #nav ul li ul li{
  background:aqua; /*Test that doesn't work*/
  }
  
  #nav ul li a{
  text-align:center;
  text-decoration:none;
  height:20px;
  width:100px;
  padding:10px;
  display:block;
  color:#003300;
  }
  
  #nav ul ul{
  position:absolute;
  visibility:hidden;
  }
  
  #nav ul li:hover ul{
  visibility:visible;
  }
  
  #nav ul li:hover a{
  background-image: url(EN/Button_menu_rollover.png);
  }
  </code></pre>
  
  <p>The drop down items get the same format as the button called "Button_menu_rollover", which gives me a very bad result.</p>