Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Just add </p> <pre><code>#nav li ul ul ul { left: 192px; top:0px; margin: 0 0 0 13px; } </code></pre> <p>and you are done...</p> <p>Below is what I have and it is working perfect... Yipee!!! I did it first time and worked!!!</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style&gt; #nav, #nav ul { line-height: 1.5em; list-style-position: outside; list-style-type: none; margin: 0; padding: 0; position: relative; } #nav a:link, #nav a:active, #nav a:visited { background-color: #333333; border: 1px solid #333333; color: #FFFFFF; display: block; padding: 0 5px; text-decoration: none; } #nav a:hover { background-color: #FFFFFF; color: #333333; } #nav li { position: relative; width: 100px; } #nav ul { display: none; left: 100px; position: absolute; width: 192px; top:0; } #nav li ul a { float: left; width: 192px; } #nav ul ul { top:0; } #nav li ul ul { left: 192px; top:25px; margin: 0 0 0 13px; } #nav li ul ul ul { left: 192px; top:0px; margin: 0 0 0 13px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{ display: none; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul { display: block; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;ul id="nav"&gt; &lt;li&gt;&lt;a href="#"&gt;cat1&lt;/a&gt;&lt;ul class="jaccordion"&gt; &lt;li&gt;&lt;a href="#"&gt;cat1.1&lt;/a&gt;&lt;ul class="jaccordion"&gt;&lt;/ul&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;cat1.2&lt;/a&gt;&lt;ul class="jaccordion"&gt; &lt;li&gt;&lt;a href="#"&gt;cat1.2.1&lt;/a&gt;&lt;ul class="jaccordion"&gt; &lt;li&gt;&lt;a href="#"&gt;cat1.2.1.1&lt;/a&gt;&lt;ul class="jaccordion"&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;cat1.3&lt;/a&gt;&lt;ul class="jaccordion"&gt;&lt;/ul&gt;&lt;/li&gt; &lt;/ul&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;cat2&lt;/a&gt;&lt;ul class="jaccordion"&gt; &lt;li&gt;&lt;a href="#"&gt;cat2.1&lt;/a&gt;&lt;ul class="jaccordion"&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload