title: keeping 2nd level navigation on first level li:hover visible
body: <p>We have horizontal 1st level and 2nd level navigations. When a 1st level li is hovered over, a second level ul is displayed horizontally above the first level ul. </p>
  
  <p>How do we make the second level ul remain visible when the mouse leaves the first level li? Is this possible with CSS only..??</p>
  
  <p>Here's the CSS:</p>
  
  <pre><code>ul.ebene1{display:inline;}
  ul.ebene1 li{display:inline; list-style-type:none; margin-right:2%;}
  
  ul.ebene2{display:none;}
  ul.ebene1 li:hover ul.ebene2{display:block; position:fixed; bottom:6%; width:80%; font-size:0.9em;}
  </code></pre>
  
  <p>And the HTML:</p>
  
  <pre><code>&lt;ul class="ebene1"&gt;
      &lt;li&gt;&lt;a href=""&gt;NAV1&lt;/a&gt;
          &lt;ul class="ebene2"&gt;
              &lt;li&gt;&lt;a href=""&gt;Nav2&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href=""&gt;Nav2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;NAV1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;NAV1&lt;/a&gt;
          &lt;ul class="ebene2"&gt;
              &lt;li&gt;&lt;a href=""&gt;Nav2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Nav2&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;NAV1&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>