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

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

[Ctrl+A 全选注:如需引入外部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>zero  
          dollars advertising page </LI> 
          <LI>wrapping text  
          around images </LI> 
          <LI>styled form  
          </LI> 
          <LI>active  
          focus </LI> 
          <LI>styled  
                  form </LI> 
                  <LI>removing  
                  active/focus borders </LI> 
                  <LI>hover/click  
                  </LI></UL></TD></TR></TBODY></TABLE></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></LI> 
  <LI>  
  -->  
  <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></LI> 
  <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></LI> 
  <LI>the first  
          example for Internet Explorer </LI> 
          <LI>weft fonts  
          </LI> 
          <LI>vertically  
          aligning text </LI></UL></TD></TR></TBODY></TABLE></LI> 
  <LI>a colour  
          wheel using opaque colours </LI> 
          <LI>a menu  
          using opacity </LI> 
          <LI>partial  
          opacity </LI> 
          <LI>partial  
          opacity II </LI> 
          <LI>styled  
                  form </LI> 
                  <LI>removing  
                  active/focus borders </LI> 
                  <LI>hover/click  
                  </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

«
»

PHP教程

PHP简介 PHP基本语法 PHP类型 PHP变量 PHP运算符 PHP控制结构 PHP函数 PHP类与对象 PHP异常处理函数库分类