Note that there are some explanatory texts on larger screens.

plurals
  1. POLeft align last menu item in 3 label deep dropdown menu
    primarykey
    data
    text
    <p>I have a dropdown menu and if the the last menu item on level 1 has 3 level deep dropdown sub-menu then the third level didn't show up because all the sub-menu is displaying left to right . </p> <p>I want the last menu item to be displayed its sub-menu item from right to left ... I have searched but couldn't find a suitable answer. </p> <p>I have posted sample code in jsfiddle and in that fiddle the <code>{M-2}Level 1</code> have sub-menu <code>Level-2-1</code> and it has a sub-menu <code>Level 3-1</code> . I want the <code>Level 3-1</code> to be displayed in the left side of <code>Level-2-1</code>. I mean it should be right to left instead of left to right.</p> <p><strong>Here is the HTML:</strong></p> <pre><code>&lt;div id="nav"&gt; &lt;ul&gt; &lt;li&gt;{M-1}Level 1 &lt;ul&gt; &lt;li&gt;Level 2-1 &lt;ul&gt; &lt;li&gt;Level 3-1&lt;/li&gt; &lt;li&gt;Level 3-2&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;{M-2}Level 1 &lt;ul&gt; &lt;li&gt;Level 2-1 &lt;ul&gt; &lt;li&gt;Level 3-1&lt;/li&gt; &lt;li&gt;Level 3-2&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p><strong>and the CSS:</strong></p> <pre><code>#nav ul{ margin:0; padding:0; list-style:none; } #nav ul li{ margin:0; padding:10px 20px; position:relative; height:20px; line-height:20px; background-color:#EEE; } #nav &gt; ul &gt; li { float: left; height:30px; line-height:30px; background-color:#CCC; } #nav li &gt; ul{ visibility:hidden; width:200px; position: absolute; top:0px; left:200px; border-left:1px solid #000; } #nav &gt; ul &gt; li &gt; ul{ top:50px; left:0; } #nav li:hover{ background-color:#999; } #nav li:hover &gt; ul{ visibility:visible; } </code></pre> <p>Here is the jsfiddle <a href="http://jsfiddle.net/yb4aL/7/" rel="nofollow">http://jsfiddle.net/yb4aL/7/</a></p>
    singulars
    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.
    1. This table or related slice is empty.
    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