A Definition List flyout menu

• DEMOS

  zero dollars

  wrapping text

  styled form

  active focus

  shadow boxing

  image map

  fun with backgrounds

  fade scrolling

  em sized images

• MENUS

  spies menu

  vertical menu

  enlarging list

  link images

  non-rectangular links

  jigsaw links

  circular links

• LAYOUTS

  Fixed 1

  Fixed 2

  Fixed 3

  Fixed 4

  minimum width for Internet Explorer

• MOZILLA

  drop down menu

  cascading menu

  content:

  mozzie box

  rainbow box

  snooker cue made using border art

  target practise

Information

After the last few drop-down definition list menus we move on to the flyout version. Unfortunately these menus do not lend themselves to having multiple levels but they are easier to deal with and also easier to style.

Again it works in IE6, IE7, Opera 8.5, Opera 9, Firefox 2, Mozilla and Netscape etc. IE5.x will see the top level links only.

====================================

#menu {list-style-type:none; margin:0 auto 50px auto; padding:0; width:302px;}
#menu li {padding:0; margin:0; position:relative; width:150px; height:1.7em; z-index:100;}
#menu li dl {position:absolute; top:0; left:0; padding-bottom:0;}
#menu li a, #menu li a:visited {text-decoration:none;}
#menu li dd {display:none;}
#menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
#menu dl {width: 150px; margin: 0; padding: 0; background: transparent;}
#menu dt {margin:0; padding: 0;}

#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left; width:150px; float:right; clear:right;}

#menu dt a, #menu dt a:visited {display:block; font-size: 0.9em; color: #c00; text-align:center; border:1px solid #c00; border-width:0 1px 1px 1px; background:#d4d4d4; padding:0.25em 0 0.75em 0;}

#menu li a:hover {border:0;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {width:301px;}

#menu li:hover dt a, #menu a:hover dt a {color:#000; background:#ddd; border:1px solid #c00; border-width:0 1px 1px 1px;}

#menu dd a, #menu dd a:visited {background:#c00; color:#fff; padding:0.5em 0; text-decoration:none; display:block; text-align:center; border-left:1px solid #c00; border-right:1px solid #c00; width:148px;}

#menu dd a:hover {background: #ddd; color:#000; border-left:1px solid #c00; border-right:1px solid #c00;}

#menu b {display:block; overflow:hidden; height:1px;}

b.p1 {background:#c00; margin:0 5px;}
b.p2 {background:#d4d4d4; border:2px solid #c00; border-width:0 2px; margin:0 3px;}
b.p3 {background:#d4d4d4; margin:0 2px; border:1px solid #c00; border-width:0 1px;}
b.p4 {height:2px; background:#d4d4d4; margin:0 1px; border:1px solid #c00; border-width:0 1px;}
b.p5 {background:#c00; margin:0 5px;}
b.p6 {background:#c00; margin:0 3px;}
b.p7 {background:#c00; margin:0 2px;}
b.p8 {height:2px; background:#c00; margin:0 1px;}

#menu li:hover b.p2, #menu a:hover b.p2 {background:#fff;}
#menu li:hover b.p3, #menu a:hover b.p3 {background:#f0f0f0;}
#menu li:hover b.p4, #menu a:hover b.p4 {background:#e8e8e8;}