Databases
StackOverflow2013
Postsdbo
POAligning the right edge of the drop down menu
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAligning the right edge of the drop down menu
    text
    copied!<p>I have the following code from <a href="http://nettuts.s3.amazonaws.com/819_megamenu/demo/index.html#" rel="nofollow">here</a> which generates some fat menu:</p> <pre><code>&lt;ul id="menu"&gt; &lt;li class="menu_right"&gt;&lt;a href="" class="drop"&gt;1 column&lt;/a&gt; &lt;div class="dropdown_1column align_right"&gt; &lt;div class="col_1"&gt; &lt;ul class="simple"&gt; &lt;li&gt;&lt;a href="#"&gt;FreelanceSwitch&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Creattica&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;WorkAwesome&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt;&lt;/ul&gt; </code></pre> <p>The style is:</p> <pre><code>#menu .menu_right { float: right; margin-right: 0px; } #menu li .align_right { /* Rounded Corners */ -moz-border-radius: 5px 0px 5px 5px; -webkit-border-radius: 5px 0px 5px 5px; border-radius: 5px 0px 5px 5px; } #menu li:hover .dropdown_1column, #menu li:hover .dropdown_2columns, #menu li:hover .dropdown_3columns, #menu li:hover .dropdown_4columns, #menu li:hover .dropdown_5columns { left: -1px; top: auto; } #menu li { float: left; display: block; position: relative; padding: 4px 10px 4px 10px; margin-right: 30px; margin-top: 7px; border: none; } #menu li:hover { border: 1px solid #777777; padding: 4px 9px 4px 9px; -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; } #menu li a { display: block; outline: 0; } </code></pre> <p>If the <code>right:-1px;</code> is removed from <code>#menu li:hover .align_right</code>, then the right edge of the drop down no longer aligns with the right edge of the parent ie "1 column" in the menubar (instead the left edge of the drop down aligns with the parent). </p> <p><strong>What is the significance of the negative position of right</strong>? Usually the negative value of left/right has the purpose of hiding an element as is happening for the drop down ie they are hidden normally because of negative left and are shown when the left is no longer negative.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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