title: Display a ul class when the mouse hovers over a li class css only
body: <p>I am currently looking into developing a CSS only drop down menu. The idea is when the mouse hovers over a ul tag it will make another ul class appear. </p>
  
  <p>Below is the code that I currently have. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;head&gt;
  &lt;link href="nav.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  
  &lt;ul class="nav"&gt;
      &lt;li class="topMenu"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;ul class="subMenu" id="home"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Hello&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;World&lt;/a&gt;&lt;/li&gt;      
      &lt;/ul&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.nav, .topMenu, .subMenu
  {
      position: relative;
      list-style: none;
  }
  
  .topMenu
  {
      position: relative;
      float: left;
  }
  
  .subMenu
  {
      display: none;
  }
  
  .topMenu a:hover + li
  {
      display: block;
      background-color: blue;
  }
  </code></pre>
  
  <p>The idea is that when the mouse hovers over the li class="topMenu" then the ul class="subMenu" id="home" should appear underneath. </p>
  
  <p>Ideally this should be only in a CSS format without requiring any javascript etc. </p>
  
  <p>Thanks for any help you can provide. </p>