title: List item `li:hover` is not working
body: <p>Can anyone tell me what's wrong with my code below? I'm trying to make the menu show the list when hover over each link, but it's not working for some reason. I have already tried <code>.menu ul ul: hover {visibility: visible; }</code> and it didn't work. </p>
  
  <p>Check my code and thank you in advance.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  .menu {
    width: 100%;
    height: 50px;
    background-color: #222;
    font-family: 'Arial';
  }
  
  .menu ul {
    list-style: none;
    position: relative;
  }
  
  .menu ul li {
    width: 150px;
    float: left;
  }
  
  .menu a {
    padding: 15px;
    display: block;
    text-decoration: none;
    text-align: center;
    background-color: #222;
    color: #fff;
  }
  
  .menu ul ul {
    position: absolute;
    visibility: hidden;
  }
  
  .menu ul li ul:hover {
    visibility: visible;
  }
  
  .menu a:hover {
    background-color: #f4f4f4;
    color: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="menu"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;test1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;test2&lt;/a&gt;&lt;/li&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;test3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;test4&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;test5&lt;/a&gt;&lt;/li&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;test6&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;test7&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;test8&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;test9&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>