A Definition List drop-down menu three

• 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

One final version of a drop down definition list that combines the drop down styling with the snazzy borders styling to give a menu with rounded corners without the need for images.

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

==============================================================
#menu {list-style-type:none; margin:40px auto 100px auto; padding:0; width:608px;}
#menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; 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 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 {padding-bottom:10px;}
#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;}

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

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

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

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

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

#menu b.p1 {background:#08c; margin:0 5px;}
#menu b.p2 {background:#d4d4d4; border:2px solid #08c; border-width:0 2px; margin:0 3px;}
#menu b.p3 {background:#d4d4d4; margin:0 2px; border:1px solid #08c; border-width:0 1px;}
#menu b.p4 {height:2px; background:#d4d4d4; margin:0 1px; border:1px solid #08c; border-width:0 1px;}
#menu b.p5 {background:#08c; margin:0 5px;}
#menu b.p6 {background:#08c; margin:0 3px;}
#menu b.p7 {background:#08c; margin:0 2px;}
#menu b.p8 {height:2px; background:#08c; 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;}