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


答案：现在的下拉菜单是兼容性越来越好了，不用js的最好了，但如果能用最少的代码实现出效果，也是不错的
第一个，用到的js,不过很短，也很明了
<style> 
*{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; 
} 
</style> 

<div> 
<li onmouseover="this.className='class2'" onmouseout="this.className='class1'" class="class1"> <span>下挂菜单</span> 
万水千山 
万种风情 
万山千水 
万马奔腾 
</li> 
</div>

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

这一个也不错
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> 
<!-- saved from url=(0054)http://www.jluvip.com/works/css/dropmenu/dropmenu.html --> 
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>THE ULTIMATE CSS ONLY DROPDOWN MENU</TITLE> 
<META http-equiv=Content-Type content="text/html; charset=gb2312"> 
<style type=text/css> 
.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 
} 
</style> 
<!--[if lte IE 6]> 
<link rel="stylesheet" media="all" type="text/css" href=> 
<![endif]--> 
<META content="MSHTML 6.00.6000.16441" name=GENERATOR></HEAD> 
<BODY> 
<DIV class=menu> 
<UL> 
  <LI>DEMOS<!--[if IE 7]> <!--><!--<![endif]--> 
  <TABLE> 
    <TBODY> 
    <TR> 
      <TD> 
        <UL> 
          <LI>zero  
          dollars advertising page </LI> 
          <LI>wrapping text  
          around images </LI> 
          <LI>styled form  
          </LI> 
          <LI>active  
          focus </LI> 
          <LI>hover/click  
          with no borders<!--[if IE 7]> <!--><!--<![endif]--> 
          <TABLE> 
            <TBODY> 
            <TR> 
              <TD> 
                <UL> 
                  <LI>styled  
                  form </LI> 
                  <LI>removing  
                  active/focus borders </LI> 
                  <LI>hover/click  
                  </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]> 
 
<![endif]--></LI> 
          <LI class=upone>shadow  
          boxing </LI> 
          <LI>image map  
          for detailed information </LI> 
          <LI>fun with  
          background images </LI> 
          <LI>fade  
          scrolling </LI> 
          <LI>em image  
          sizes compared </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]> 
 
<![endif]--></LI> 
  <LI>BOXES<!--[if IE 7]>  
  --> <!--<![endif]--> 
  <TABLE> 
    <TBODY> 
    <TR> 
      <TD> 
        <UL> 
          <LI>a coded  
          list of spies </LI> 
          <LI>vertical  
          menu </LI> 
          <LI>enlarging  
          unordered list </LI> 
          <LI>link  
          images </LI> 
          <LI>non-rectangular  
          </LI> 
          <LI>jigsaw  
          links </LI> 
          <LI>circular  
          links </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]> 
 
<![endif]--></LI> 
  <LI>MOZILLA<!--[if IE 7]>  
<!--><!--<![endif]--> 
  <TABLE> 
    <TBODY> 
    <TR> 
      <TD> 
        <UL> 
          <LI>drop down  
          menu </LI> 
          <LI>cascading  
          menu </LI> 
          <LI>content:  
          </LI> 
          <LI>mozzie  
          box </LI> 
          <LI>I can  
          build a rainbow with transparent borders </LI> 
          <LI>a snooker  
          cue using border art </LI> 
          <LI>target  
          practise </LI> 
          <LI>two tone  
          headings </LI> 
          <LI>shadow  
          text </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]> 
 
<![endif]--></LI> 
  <LI>EXPLORER<!--[if IE 7]> <!--><!--<![endif]--> 
  <TABLE> 
    <TBODY> 
    <TR> 
      <TD> 
        <UL> 
          <LI>the first  
          example for Internet Explorer </LI> 
          <LI>weft fonts  
          </LI> 
          <LI>vertically  
          aligning text </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]> 
 
<![endif]--></LI> 
  <LI>OPACITY<!--[if IE 7]>  
<!--><!--<![endif]--> 
  <TABLE> 
    <TBODY> 
    <TR> 
      <TD> 
        <UL> 
          <LI>a colour  
          wheel using opaque colours </LI> 
          <LI>a menu  
          using opacity </LI> 
          <LI>partial  
          opacity </LI> 
          <LI>partial  
          opacity II </LI> 
          <LI>HOVER/CLICK<!--[if IE 7]>  
<!--><!--<![endif]--> 
          <TABLE> 
            <TBODY> 
            <TR> 
              <TD> 
                <UL class=left> 
                  <LI>styled  
                  form </LI> 
                  <LI>removing  
                  active/focus borders </LI> 
                  <LI>hover/click  
                  </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]> 
 
<![endif]--></LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]> 
 
<![endif]--></LI></UL></DIV></BODY></HTML> 


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

http://www.jluvip.com/works/css/dropmenu/dropmenu.html
上一个：JS值当前DIV的ID值的代码
下一个：用Javscript实现表单复选框的全选功能
更多图片编程知识: