 <p>The simplest way in a nutshell:</p> <p><a href="https://jsfiddle.net/svArtist/2jd9uvx0/" rel="nofollow">https://jsfiddle.net/svArtist/2jd9uvx0/</a></p> <ol> <li><p>hide lists inside other lists</p></li> <li><p>upon hovering list elements, show the child lists</p></li> </ol> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>ul ul { display:none; display:absolute; bottom:-100%; } li{ position:relative; } li:hover&gt;ul { display:table; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;The Salon&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Hair Cut&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt;</code></pre> </div> </div> </p>