The horizontal Float/Drop menu explained

18th July 2010

Check the page source code for the stylesheet used for each step. The code used is identical for each step and is given in the information below.

This is a link above the menu so that you can see the affect of the various steps on this area.



Step one - getting the menu horizontal

The top level links 'Products' and 'Services' and their sub menus are floated left. The total width for each pair is 240px and the links are all 120px wide so that they fit inline. However when hovering the links they become 121px wide, but because the total width is now 241px the links will no longer fit within the overall width of 240px and so the sub menus drop below their top level link. This also happens when hovering the sub menu links. Hover over 'Products' and 'Services' to see the sub menus drop below allowing you to move onto the sub menu items. The negative bottom margin for the sub menus is to stop the sub menus pushing down the content below when moving beneath the top level link.

NOTE: I have added a green background color to the top level list element to indicate its size and position.


This is a link above the menu so that you can see the affect of the various steps on this area.



Step two - moving the sub menus out of the way

Applying a negative top margin to the top level list item we can move the sub menu upwards, then applying an equal positive top margin to the top level link we can move this back into position. Applying a large enough top margin in this way we can move the sub menu out of sight (should we wish to). I have applied a small top margin so that you can see what is happening. You will also see that the top level list element is growing to enclose the top level link and sub menu (all browsers except IE5.x and IE6 which has this fixed at the same height as the top level links). The green area is now covering the link above the menu in IE7 and only the text is seen in IE8 and non-IE browsers.


This is a link above the menu so that you can see the affect of the various steps on this area.



Step three - getting the top level links closer together

Reducing the width of the top level list item and applying a right margin to the top level link we can move the sub menu to the left.


This is a link above the menu so that you can see the affect of the various steps on this area.



Step four - getting the top level links next to each other (almost)

Reducing the width of the top level list item to its minimum and applying a right margin to the top level link we can move the sub menu so that it sits above the top level link.


This is a link above the menu so that you can see the affect of the various steps on this area.



Step five removing the jagged right edge

You will no doubt have noticed that when the width of the links is increased to 121px (on hover) it produces an unsightly jagged right edge to the sub menu. To stop this we can use the link right margin size instead for the link width on hover which will then keep the width at 120px but still increase the total 'space' occupied by the link and as such have the right edge of the sub menu remain vertical.


This is a link above the menu so that you can see the affect of the various steps on this area.





Step six - making the sub menus 'invisible'

If the sub menus are placed off the top of the screen then the top level list item (green area) will extend the full height of the browser window and may cause problems with the content above the menu. To avoid conflicts you could arrange the z-index of the various page elements so that they appear on top of this area OR simply make a small change to the menu styling to give the outer div.nav element a position:relative; and the top level ul.menu a position:absolute; with overflow:hidden; which will remove the top level list element and the sub menus from view. After doing this we can then remove the negative bottom margin from the ul.sub as this is no longer required.



copyright © stu nicholls - CSS play

Information

A tutorial to explain the working of the 'Float/Drop' menu system.

The code used for each of the steps above is identical:

<div class="nav">
 <ul class="menu">
  <li class="level1-li"><a class="level1-a" href="#url">Products</a>
   <ul class="sub">
    <li><a href="#url">Digital Cameras</a></li>
   <li><a href="#url">Tripods</a></li>
   <li><a href="#url">Flashguns</a></li>
    <li><a href="#url">Telephoto Lenses</a></li>
   </ul>
  </li>
  <li class="level1-li"><a class="level1-a" href="#">Services</a>
   <ul class="sub">
    <li><a href="#url">Enlarging</a></li>
    <li><a href="#url">Framing</a></li>
    <li><a href="#url">Printing</a></li>
    <li><a href="#url">Copying</a></li>
    <li><a href="#url">Sepia Toning</a></li>
  </ul>
  </li>
 </ul>
</div>


Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.



Please Support CSS play

Please note that if your donation is for a demo/menu then you will need to email me with the url of the demo/menu after making the donation

For more CSS demonstrations I recommend that you visit the Dynamic Drive CSS Library.


Free, practical CSS menus, layouts, and examples

Follow CSS play


Facebook   Twitter   Facebook Fan Page