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

　　现在的下拉菜单是兼容性越来越好了，不用js的最好了，但如果能用最少的代码实现出效果，也是不错的

　　第一个，用到的js,不过很短，也很明了

　　这一个也不错

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> 
 
<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> 
 
<META content="MSHTML 6.00.6000.16441" name=GENERATOR></HEAD> 
<BODY> 
<DIV class=menu> 
<UL> 
  <LI><A class=drop href="http://www.jluvip.com/works/css/menu/index.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmenu%2Findex.html">DEMOS</A> 
  <table> 
    <TBODY> 
    <TR> 
      <TD> 
        <UL> 
          <LI><A title="The zero dollar ads page"  
          href="http://www.jluvip.com/works/css/menu/zero_dollars.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmenu%2Fzero_dollars.html">zero  
          dollars advertising page</A> </LI> 
          <LI><A title="Wrapping text around images"  
          href="http://www.jluvip.com/works/css/menu/embed.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmenu%2Fembed.html">wrapping text  
          around images</A> </LI> 
          <LI><A title="Styling forms"  
          href="http://www.jluvip.com/works/css/menu/form.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmenu%2Fform.html">styled form</A>  
          </LI> 
          <LI><A title="Removing active/focus borders"  
          href="http://www.jluvip.com/works/css/menu/nodots.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmenu%2Fnodots.html">active  
          focus</A> </LI> 
          <LI><A class=drop title="Hover/click with no active/focus borders"  
          href="http://www.jluvip.com/works/css/menu/hover_click.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmenu%2Fhover_click.html">hover/click  
          with no borders</A> 
          <table> 
            <TBODY> 
            <TR> 
              <TD> 
                <UL> 
                  <LI><A title="Styling forms"  
                  href="http://www.jluvip.com/works/css/menu/form.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmenu%2Fform.html">styled  
                  form</A> </LI> 
                  <LI><A title="Removing active/focus borders"  
                  href="http://www.jluvip.com/works/css/menu/nodots.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmenu%2Fnodots.html">removing  
                  active/focus borders</A> </LI> 
                  <LI><A title="Hover/click with no active/focus borders"  
                  href="http://www.jluvip.com/works/css/menu/hover_click.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmenu%2Fhover_click.html">hover/click</A>  
                  </LI></UL></TD></TR></TBODY></TABLE></LI> 
          <LI class=upone><A title="Multi-position drop shadow"  
          href="http://www.jluvip.com/works/css/menu/shadow_boxing.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmenu%2Fshadow_boxing.html">shadow  
          boxing</A> </LI> 
          <LI><A title="Image Map for detailed information"  
          href="http://www.jluvip.com/works/css/menu/old_master.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmenu%2Fold_master.html">image map  
          for detailed information</A> </LI> 
          <LI><A title="fun with background images"  
          href="http://www.jluvip.com/works/css/menu/bodies.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmenu%2Fbodies.html">fun with  
          background images</A> </LI> 
          <LI><A title="fade-out scrolling"  
          href="http://www.jluvip.com/works/css/menu/fade_scroll.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmenu%2Ffade_scroll.html">fade  
          scrolling</A> </LI> 
          <LI><A title="em size images compared"  
          href="http://www.jluvip.com/works/css/menu/em_images.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmenu%2Fem_images.html">em image  
          sizes compared</A> </LI></UL></TD></TR></TBODY></TABLE></LI> 
  <LI><A href="http://www.jluvip.com/works/css/boxes/index.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fboxes%2Findex.html">BOXES 
  <table> 
    <TBODY> 
    <TR> 
      <TD> 
        <UL> 
          <LI><A title="a coded list of spies"  
          href="http://www.jluvip.com/works/css/dropmenu/spies.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fdropmenu%2Fspies.html">a coded  
          list of spies</A> </LI> 
          <LI><A title="a horizontal vertical menu"  
          href="http://www.jluvip.com/works/css/dropmenu/vertical.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fdropmenu%2Fvertical.html">vertical  
          menu</A> </LI> 
          <LI><A title="an enlarging unordered list"  
          href="http://www.jluvip.com/works/css/dropmenu/expand.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fdropmenu%2Fexpand.html">enlarging  
          unordered list</A> </LI> 
          <LI><A title="an unordered list with link images"  
          href="http://www.jluvip.com/works/css/dropmenu/enlarge.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fdropmenu%2Fenlarge.html">link  
          images</A> </LI> 
          <LI><A title="non-rectangular links"  
          href="http://www.jluvip.com/works/css/dropmenu/cross.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fdropmenu%2Fcross.html">non-rectangular</A>  
          </LI> 
          <LI><A title="jigsaw links"  
          href="http://www.jluvip.com/works/css/dropmenu/jigsaw.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fdropmenu%2Fjigsaw.html">jigsaw  
          links</A> </LI> 
          <LI><A title="circular links"  
          href="http://www.jluvip.com/works/css/dropmenu/circles.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fdropmenu%2Fcircles.html">circular  
          links</A> </LI></UL></TD></TR></TBODY></TABLE></LI> 
  <LI><A href="http://www.jluvip.com/works/css/mozilla/index.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmozilla%2Findex.html">MOZILLA</A> 
  <table> 
    <TBODY> 
    <TR> 
      <TD> 
        <UL> 
          <LI><A title="A drop down menu"  
          href="http://www.jluvip.com/works/css/mozilla/dropdown.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmozilla%2Fdropdown.html">drop down  
          menu</A> </LI> 
          <LI><A title="A cascading menu"  
          href="http://www.jluvip.com/works/css/mozilla/cascade.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmozilla%2Fcascade.html">cascading  
          menu</A> </LI> 
          <LI><A title="Using content:"  
          href="http://www.jluvip.com/works/css/mozilla/content.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmozilla%2Fcontent.html">content:</A>  
          </LI> 
          <LI><A title=":hover applied to a div"  
          href="http://www.jluvip.com/works/css/mozilla/moxbox.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmozilla%2Fmoxbox.html">mozzie  
          box</A> </LI> 
          <LI><A title="I can build a rainbow"  
          href="http://www.jluvip.com/works/css/mozilla/rainbow.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmozilla%2Frainbow.html">I can  
          build a rainbow with transparent borders</A> </LI> 
          <LI><A title="Snooker cue"  
          href="http://www.jluvip.com/works/css/mozilla/snooker.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmozilla%2Fsnooker.html">a snooker  
          cue using border art</A> </LI> 
          <LI><A title="Target Practise"  
          href="http://www.jluvip.com/works/css/mozilla/target.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmozilla%2Ftarget.html">target  
          practise</A> </LI> 
          <LI><A title="Two tone headings"  
          href="http://www.jluvip.com/works/css/mozilla/splittext.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmozilla%2Fsplittext.html">two tone  
          headings</A> </LI> 
          <LI><A title="Shadow text"  
          href="http://www.jluvip.com/works/css/mozilla/shadow_text.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmozilla%2Fshadow_text.html">shadow  
          text</A> </LI></UL></TD></TR></TBODY></TABLE></LI> 
  <LI><A href="http://www.jluvip.com/works/css/ie/index.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fie%2Findex.html">EXPLORER</A> 
  <table> 
    <TBODY> 
    <TR> 
      <TD> 
        <UL> 
          <LI><A title="Example one"  
          href="http://www.jluvip.com/works/css/ie/exampleone.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fie%2Fexampleone.html">the first  
          example for Internet Explorer</A> </LI> 
          <LI><A title="Weft fonts"  
          href="http://www.jluvip.com/works/css/ie/weft.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fie%2Fweft.html">weft fonts</A>  
          </LI> 
          <LI><A title="Vertical align"  
          href="http://www.jluvip.com/works/css/ie/exampletwo.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fie%2Fexampletwo.html">vertically  
          aligning text</A> </LI></UL></TD></TR></TBODY></TABLE></LI> 
  <LI><A href="http://www.jluvip.com/works/css/opacity/index.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fopacity%2Findex.html">OPACITY</A> 
  <table> 
    <TBODY> 
    <TR> 
      <TD> 
        <UL> 
          <LI><A title="colour wheel"  
          href="http://www.jluvip.com/works/css/opacity/colours.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fopacity%2Fcolours.html">a colour  
          wheel using opaque colours</A> </LI> 
          <LI><A title="a menu using opacity"  
          href="http://www.jluvip.com/works/css/opacity/picturemenu.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fopacity%2Fpicturemenu.html">a menu  
          using opacity</A> </LI> 
          <LI><A title="partial opacity"  
          href="http://www.jluvip.com/works/css/opacity/png.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fopacity%2Fpng.html">partial  
          opacity</A> </LI> 
          <LI><A title="partial opacity II"  
          href="http://www.jluvip.com/works/css/opacity/png2.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fopacity%2Fpng2.html">partial  
          opacity II</A> </LI> 
          <LI><A class=drop title="Hover/click with no active/focus borders"  
          href="http://www.jluvip.com/works/css/menu/hover_click.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmenu%2Fhover_click.html">HOVER/CLICK</A> 
          <table> 
            <TBODY> 
            <TR> 
              <TD> 
                <UL class=left> 
                  <LI><A title="Styling forms"  
                  href="http://www.jluvip.com/works/css/menu/form.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmenu%2Fform.html">styled  
                  form</A> </LI> 
                  <LI><A title="Removing active/focus borders"  
                  href="http://www.jluvip.com/works/css/menu/nodots.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmenu%2Fnodots.html">removing  
                  active/focus borders</A> </LI> 
                  <LI><A title="Hover/click with no active/focus borders"  
                  href="http://www.jluvip.com/works/css/menu/hover_click.html" _ewebeditor_ta_href="http%3A%2F%2Fwww.jluvip.com%2Fworks%2Fcss%2Fmenu%2Fhover_click.html">hover/click</A>  
                  </LI></UL></TD></TR></TBODY></TABLE></LI></UL></TD></TR></TBODY></TABLE></LI></UL></DIV></BODY></HTML>

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

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

教程首页更多教程