搜集了几个不错的下拉菜单效果

现在的下拉菜单是兼容性越来越好了，不用js的最好了，但如果能用最少的代码实现出效果，也是不错的
第一个，用到的js,不过很短，也很明了

*{font:normal normal 14px/1.5em "宋体";}
li{list-style:none;}
span{display:block;line-height:25px;}
a{text-decoration:none;display:block;margin:5px;}
.class1{
width:100px;
height:25px;
overflow-y:hidden;
border:1px solid #ffe663;
text-align:center;
background:#fff2d9;
}

.class2{
width:100px;
height:135px;
overflow-y:hidden;
border:1px solid #ffe663;
text-align:center;
background:#fff2d9;
}

a:hover{
border:1px dashed red;
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

这一个也不错

THE ULTIMATE CSS ONLY DROPDOWN MENU

.menu {
FONT-SIZE: 0.85em; WIDTH: 750px; FONT-FAMILY: verdana, sans-serif; POSITION: relative
}
.menu UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.menu UL LI {
FLOAT: left; POSITION: relative
}
.menu UL LI A {
BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #dfc184; BORDER-LEFT: #fff 0px solid; WIDTH: 139px; COLOR: #000; LINE-HEIGHT: 3em; BORDER-BOTTOM: #fff 0px solid; HEIGHT: 3em; TEXT-DECORATION: none
}
.menu UL LI A:visited {
BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #dfc184; BORDER-LEFT: #fff 0px solid; WIDTH: 139px; COLOR: #000; LINE-HEIGHT: 3em; BORDER-BOTTOM: #fff 0px solid; HEIGHT: 3em; TEXT-DECORATION: none
}
* HTML .menu UL LI A {
WIDTH: 139px
}
.menu UL LI A:visited {
WIDTH: 139px
}
.menu UL LI UL {
DISPLAY: none
}
TABLE {
FONT-SIZE: 1em; MARGIN: -1px; BORDER-COLLAPSE: collapse
}
.menu UL LI:hover A {
BACKGROUND: #bd8d5e; COLOR: #fff
}
.menu UL LI:hover UL {
MARGIN-TOP: 1px; DISPLAY: block; LEFT: 0px; WIDTH: 150px; POSITION: absolute; TOP: 3em
}
.menu UL LI:hover UL LI UL {
DISPLAY: none
}
.menu UL LI:hover UL LI A {
PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #faeec7; PADDING-BOTTOM: 5px; WIDTH: 129px; COLOR: #000; LINE-HEIGHT: 1.2em; PADDING-TOP: 5px; HEIGHT: auto
}
.menu UL LI:hover UL LI A.drop {
BACKGROUND: url(drop.png) #c9c9a7 no-repeat right bottom
}
.menu UL LI:hover UL LI A:hover {
BACKGROUND: #c9c9a7; COLOR: #000
}
.menu UL LI:hover UL LI:hover UL {
DISPLAY: block; LEFT: 150px; WIDTH: 150px; POSITION: absolute; TOP: 0px
}
.menu UL LI:hover UL LI:hover UL.left {
LEFT: -150px
}

• DEMOS
  
  
  
  

  zero dollars advertising page wrapping text around images styled form active focus hover/click with no borders styled form removing active/focus borders hover/click shadow boxing image map for detailed information fun with background images fade scrolling em image sizes compared



• BOXES
  -->
  
  
  
  

  a coded list of spies vertical menu enlarging unordered list link images non-rectangular jigsaw links circular links



• MOZILLA
  
  
  
  

  drop down menu cascading menu content: mozzie box I can build a rainbow with transparent borders a snooker cue using border art target practise two tone headings shadow text



• EXPLORER
  
  
  
  

  the first example for Internet Explorer weft fonts vertically aligning text



• OPACITY
  
  
  
  

  a colour wheel using opaque colours a menu using opacity partial opacity partial opacity II HOVER/CLICK styled form removing active/focus borders hover/click

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

http://www.jluvip.com/works/css/dropmenu/dropmenu.html