title: css menu sub-items below can't be reached on hover
body: <p>I have a css menu in Wordpress with 3 levels, and the problem is that the level below the menu level2 with level 3 opened can't be reached on hover (the complete 2nd level menu closes).
  Any help please?</p>
  
  <p>My code is:</p>
  
  <pre><code>&lt;div class="nav"&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Main-menu&lt;/a&gt;
  &lt;ul class="sub-menu"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Sub-item&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Second-submenu&lt;/a&gt;
      &lt;ul class="sub-menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;XY&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;XY&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;XY&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Last-sub-menu&lt;/a&gt;
      &lt;ul class="sub-menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;XY&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;XY&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;XY&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Second-item&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>And the css: </p>
  
  <pre><code>.nav { font-size:1.4em; }
  
  .nav ul { padding:0; margin: 0; background: #0A488E; }
  
  .nav ul li { display:inline-block; margin-right:5%; }
  
  .nav ul li a { color:white; }
  
  .nav li ul.sub-menu {
    display: none;
    position: absolute;
    padding: 7px 21px;
    padding-left: 21px;
    text-align: left;
    margin-left: -21px;
    background: #0A488E;
    font-size: 0.9em;
    z-index: 100;
  }
  
  .nav li:hover &gt; ul.sub-menu, .nav li ul.sub-menu li:hover &gt; ul.sub-menu {
  display: block;
  }
  
  .nav li ul.sub-menu li {
  display:block;
  margin: 9px 0;
  }
  
  .nav li ul.sub-menu li ul.sub-menu {
    position: relative;
    padding: 0 5%;
  } 
  </code></pre>
  
  <p>The fiddle is here: <a href="https://jsfiddle.net/f7ny3s3r/2/" rel="nofollow">https://jsfiddle.net/f7ny3s3r/2/</a></p>
  
  <p>(The Last sub-menu is the problematic one)</p>
  
  <p>Thank you for the help!</p>