Simon Battersby

Click here for Part 2

First a word of warning. If by any chance you’re trying to follow this and using IE6, then first of all, it won’t work (but read on for a fix), and second of all, do yourself a big favour and install Firefox, or at least IE7.

The css changes here are quite simple.To create the “flyout” behaviour I’m going to use the concept of absolute positioning. This will enable me to use css to exactly define where I want the flyout menu to appear, outside the normal flow definded by the html.

I want to trigger this behaviour when the mouse is hovered over the appropriate top level menu button – so for example when I hover over the “Blog” menu button the second level menu should appear to the right of the Blog button, on top of any text.

I need to make two additions to the css to make this work:

css

#nav-menu ul
 {list-style-type:none;
  margin:0px;
  padding:0px}

#nav-menu ul a
{text-decoration:none;
 border:1px solid #303030;
 width:170px;
 display:block;
 text-align:center;
 font-size:14pt;
 line-height:2em;
 background:url(Images/Buttons/Button_top.gif) repeat-x left;
 font-family:Arial, Helvetica, sans-serif;
 color:white}

#nav-menu ul ul
{display:none} 

body.blog #nav-menu ul ul.blog, 
body.web #nav-menu ul ul.web
{display:block}

#nav-menu ul li{position:relative}

#nav-menu ul li:hover ul
{display:block;
 position:absolute;
 left:172px;
 top:0px;}

#nav-menu ul ul li a
{border:1px solid #888888;
 border-bottom: none;
 font-size:12pt;
 line-height: 1.6em;
 color:#303030;
 background-color:#a5a5a5;
 background-image:none;}

Let’s have a look at what I’ve done here. The statement

#nav-menu ul li{position:relative}

sets the reference point for my absolute positioning, in this case to be the position of the top level menu item. Once I’ve done this then the statement:

#nav-menu ul li:hover ul{display:block;position:absolute;left:172px; top:0px;}

displays the second level menu and positions it absolutely. Horizontally it’s positioned 172px to the left of the top level menu, accounting for the 170px width and a 1px border on both sides. Vertically it is positioned at the same height as the top level menu. So, from the Home page if I hover over “Blog” or “Websites” I get second level flyout. Give it a go below:

I’m not quite finished yet, because I don’t want a flyout menu if I hover over a top level menu on a page where I’m already displaying the second level menu. Sorting this out is quite easy using the classes I defined earlier. I just need to add to the css:

css

#nav-menu ul
 {list-style-type:none;
  margin:0px;
  padding:0px}

#nav-menu ul a
{text-decoration:none;
 border:1px solid #303030;
 width:170px;
 display:block;
 text-align:center;
 font-size:14pt;
 line-height:2em;
 background:url(Images/Buttons/Button_top.gif) repeat-x left;
 font-family:Arial, Helvetica, sans-serif;
 color:white}

#nav-menu ul ul
{display:none} 

body.blog #nav-menu ul ul.blog, 
body.web #nav-menu ul ul.web,
body.web #nav-menu ul li:hover ul.web,
body.blog #nav-menu ul li:hover ul.blog 
{display:block;position:relative;left:0px}

#nav-menu ul li{position:relative}

#nav-menu ul li:hover ul
{position:absolute;
 display:block;
 left:172px;
 top:0px;}

#nav-menu ul ul li a
{border:1px solid #888888;
 border-bottom: none;
 font-size:12pt;
 line-height: 1.6em;
 color:#303030;
 background-color:#a5a5a5;
 background-image:none;}

What the css is saying here is that when I’m hovering over, for example “Blog” but on a page with class of “blog” then the second level menu should be positioned as normal, not as a flyout. This will take precedence over the earlier statement because it specifically applies to the blog page.

So, if you’re designing for IE7+, Firefox, Opera, Chrome or Safari, that’s all there is to it.

Sadly, however, some (most?) people need to take IE6 into account. This will not work on IE6 without a tweakette because IE6 does not support the hover behaviour except on links. There is a little widget that will take care of this however, called csshover, which you’ll find here along with instructions on how to use it. I’ve personally found version 2 of this software to be the most reliable.

If you’ve got this far, I hope you’ve found these few pages useful. If you’ve got any suggestions for improving either the css or the article, let me know.