title: h3 and list dropdown menu CSS3
body: <p>got an html list working as a dropdown menu with CSS when you hover through a &lt; li > element like "Products" in my example. But what I want is the same effect when hover through &lt; h3 > like "Contact" from my example. Is it possible?</p>
  
  <p>Here's the html:</p>
  
  <pre><code>&lt;h3&gt;Contact&lt;/h3&gt;
   &lt;ul&gt;
  
      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;Products &amp;#9662;&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Laptops&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Monitors&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Printers&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And the CSS code:</p>
  
  <pre><code>ul li ul {
      display: none;
  }
  
  ul li:hover ul{
      display: block; /* display the dropdown */
  }
  </code></pre>
  
  <p>Thank you very much in advance.</p>