Note that there are some explanatory texts on larger screens.

plurals
  1. POVertical 3-level dropdown menu
    primarykey
    data
    text
    <p>I have a problem with a vertical css menu with 3-level submenus.The last submenu isn't aligned as it should be and I don't know where's the problem. </p> <p>Here's a demo <a href="http://jsfiddle.net/pPckk/1/" rel="nofollow">http://jsfiddle.net/pPckk/1/</a> And if You can't open jsfiddle, here's the code:</p> <pre><code>&lt;div id="global-nav"&gt; &lt;ul class='parent'&gt; &lt;li class="smt"&gt;&lt;a href="#"&gt;cat1&lt;/a&gt;&lt;/li&gt; &lt;li class="c1"&gt; &lt;ul class='child child1'&gt; &lt;li class="smt"&gt;&lt;a href="#"&gt;cat1.1&lt;/a&gt;&lt;/li&gt; &lt;li class="smt"&gt;&lt;a href="#"&gt;cat1.2&lt;/a&gt;&lt;/li&gt; &lt;li class="c1"&gt; &lt;ul class='child child2'&gt; &lt;li class="smt"&gt;&lt;a href="#"&gt;cat1.2.1&lt;/a&gt;&lt;/li&gt; &lt;li class="c1"&gt; &lt;ul class='child child3'&gt; &lt;li class="smt"&gt;&lt;a href="#"&gt;cat1.2.1.1&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="smt"&gt;&lt;a href="#"&gt;cat1.3&lt;/a&gt;&lt;/li&gt; &lt;li class="smt"&gt;&lt;a href="#"&gt;cat1.4&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="smt"&gt;&lt;a href="#"&gt;cat2&lt;/a&gt;&lt;/li&gt; &lt;li class="c1"&gt; &lt;ul class='child child1'&gt; &lt;li class="smt"&gt;&lt;a href="#"&gt;cat2.1&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&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: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; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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