Geek Answers Handbook

CSS drop-down menu with a submenu corresponding to the right edge of its parent

Here is a very simple example of a CSS-based popup menu: http://jsfiddle.net/V8aL6/

<ul id="nav"> <li> <a href="#" title="Return home">Home</a> </li> <li> <a href="#" title="About the company">About</a> <ul> <li><a href="#">The product</a></li> <li><a href="#">Meet the team</a></li> </ul> </li> <li> <a href="#" title="The services we offer">Services</a> <ul> <li><a href="#">Sevice one</a></li> <li><a href="#">Sevice two</a></li> <li><a href="#">Sevice three</a></li> <li><a href="#">Sevice four</a></li> </ul> </li> <li> <a href="#" title="Our product range">Product</a> <ul> <li><a href="#">Small product (one)</a></li> <li><a href="#">Small product (two)</a></li> <li><a href="#">Small product (three)</a></li> <li><a href="#">Small product (four)</a></li> <li><a href="#">Big product (five)</a></li> <li><a href="#">Big product (six)</a></li> <li><a href="#">Big product (seven)</a></li> <li><a href="#">Big product (eight)</a></li> <li><a href="#">Enourmous product (nine)</a></li> <li><a href="#">Enourmous product (ten)</a></li> <li><a href="#">Enourmous product (eleven)</a></li> </ul> </li> <li> <a href="#" title="Get in touch with us">Contact</a> <ul> <li><a href="#">Out-of-hours</a></li> <li><a href="#">Directions</a></li> </ul> </li> </ul>

But I can not find a solution to align the submenu with its right edge, for example:

simple drop-down menu aligned left

+8
html css
source share
4 answers

This menu allows you to hide / show by changing the left property. All you need to do is adapt the CSS rule that controls the show mechanism for the submenu:

 #nav li:hover ul{ left:0; }

instead of aligning to the left, we want to align it correctly, so add right:0; . However, if we do not touch the left declaration, the menu will be disabled, so instead of left:0; we will write left:auto; so that the menu expands its internal width. To place the parent li for the field, we add the same amount as the negative, and we do:

 #nav li:hover ul{ left:auto; right:0; margin-right:-10px; }

you changed the violin

+28
source share

Better and cleaner if you put your list on the right and instead of moving UL from the screen, you can simply switch the display property from none to block.

You will need to make some changes to these rules and add these properties:

 #nav li:hover ul { display: block; right: 0; } #nav ul { display: none; } #nav ul li { margin-right: 0; }

See my updated script: http://jsfiddle.net/V8aL6/2/

+4
source share

The best solution should be:

 #nav ul li ul, #nav ul li:hover ul { float:right; margin-right:2px; /*optional*/ }
0
source share

Add the Bootstrap .pull-right <div class='btn-group' to the <div class='btn-group' . It should look like this: <div class='btn-group pull-right'

0
source share

More articles:


All Articles