无js5款纯div+css制作的弹出菜单标准


            一、最基本的：二级dropdown弹出菜单 
 
 
 
 
二级dropdown弹出菜单--A CROSS BROWSER Drop DOWN CASCADING VALIDATING MENU 
 
/* common styling */ 
/* set up the overall width of the menu div, the font and the margins */ 

.menu { 
font-family: arial, sans-serif;  
width:750px;  
margin:0;  
margin:50px 0; 
} 
/* remove the bullets and set the margin and padding to zero for the unordered list */ 
.menu ul { 
padding:0;  
margin:0; 
list-style-type: none; 
} 
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */ 
.menu ul li { 
float:left;  
position:relative; 
} 
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */ 
.menu ul li a, .menu ul li a:visited { 
display:block;  
text-align:center;  
text-decoration:none;  
width:104px;  
height:30px;  
color:#000;  
border:1px solid #fff; 
border-width:1px 1px 0 0; 
background:#c9c9a7;  
line-height:30px;  
font-size:11px; 
} 
/* make the dropdown ul invisible */ 
.menu ul li ul { 
display: none; 
} 

/* specific to non IE browsers */ 
/* set the background and foreground color of the main menu li on hover */ 
.menu ul li:hover a { 
color:#fff;  
background:#b3ab79; 
} 
/* make the sub menu ul visible and position it beneath the main menu list item */ 
.menu ul li:hover ul { 
display:block;  
position:absolute;  
top:31px;  
left:0;  
width:105px; 
} 
/* style the background and foreground color of the submenu links */ 
.menu ul li:hover ul li a { 
display:block;  
background:#faeec7;  
color:#000; 
} 
/* style the background and forground colors of the links on hover */ 
.menu ul li:hover ul li a:hover { 
background:#dfc184;  
color:#000; 
} 

 
 

 
/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */ 

/* Get rid of any default table style */ 
table { 
border-collapse:collapse; 
margin:0;  
padding:0; 
} 
/* ignore the link used by 'other browsers' */ 
.menu ul li a.hide, .menu ul li a:visited.hide { 
display:none; 
} 
/* set the background and foreground color of the main menu link on hover */ 
.menu ul li a:hover { 
color:#fff;  
background:#b3ab79; 
} 
/* make the sub menu ul visible and position it beneath the main menu list item */ 
.menu ul li a:hover ul { 
display:block;  
position:absolute;  
top:32px;  
left:0;  
width:105px; 
} 
/* style the background and foreground color of the submenu links */ 
.menu ul li a:hover ul li a { 
background:#faeec7;  
color:#000; 
} 
/* style the background and forground colors of the links on hover */ 
.menu ul li a:hover ul li a:hover { 
background:#dfc184;  
color:#000; 
} 

 

 
 

 

 

 
DEMOS 

 
DEMOS 
 
 

     
    zero dollars 
    wrapping text 
    styled form 
    active focus 
    shadow boxing 
    image map 
    fun backgrounds 
    fade scrolling 
    em sized images 
     

 
 
 
 

 

MENUS 

 
MENUS 
 
 

     
    spies menu 
    vertical menu 
    enlarging list 
    link images 
    non-rectangular 
    jigsaw links 
    circular links 
     

 
 
 
 

 

LAYOUTS 

 
LAYOUTS 
 
 

     
    Fixed 1 
    Fixed 2 
    Fixed 3 
    Fixed 4 
    minimum width 
     

 
 
 
 

 

BOXES 

 
BOXES 
 
 

     
    spies menu 
    vertical menu 
    enlarging list 
    link images 
    non-rectangular 
    jigsaw links 
    circular links 
     

 
 
 
 

 

MOZILLA 

 
MOZILLA 
 
 

     
    drop down menu 
    cascading menu 
    content: 
    mozzie box 
    rainbow box 
    snooker cue 
    target practise 
    two tone headings 
    shadow text 
     

 
 
 
 

 

EXPLORER 

 
EXPLORER 
 
 

     
    example one 
    weft fonts 
    vertical align 
     

 
 
 
 

 

OPACITY 

 
OPACITY 
 
 

     
    opaque colours 
    opaque menu 
    partial opacity 
    partial opacity II 
     

 
 
 
 

 
 

 
  

 
 

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]二、三级dropdown弹出菜单
 
 
 
 
三级dropdown弹出菜单 
 
/* common styling */ 
.menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;} 
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;} 
.menu ul {padding:0; margin:0;list-style-type: none; } 
.menu ul li {float:left; margin-right:1px; position:relative;} 
.menu ul li ul {display: none;} 

/* specific to non IE browsers */ 
.menu ul li:hover a {color:#fff; background:#36f;} 
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;} 
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;} 
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;} 
.menu ul li:hover ul li ul {display: none;} 
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;} 
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;} 
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;} 
.menu ul li:hover ul li:hover ul.left {left:-105px;} 

 
 
 
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;} 
.menu ul li a:hover ul li a.hide {display:none;} 

.menu ul li a:hover {color:#fff; background:#36f;} 
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;} 
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;} 
.menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;} 
.menu ul li a:hover ul li a ul {visibility:hidden;} 
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;} 
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;} 
.menu ul li a:hover ul li a:hover ul.left {left:-105px;} 

 
 
 

 

 

 
DEMOS 

 
DEMOS 
 
 

     
    zero dollars 
    wrapping text 
    styled form 
    active focus 

    HOVER/CLICK > 

   
  HOVER/CLICK > 
   
   

         
            styled form 
            active focus 
            hover/click 
         

     
     
   
   

     

    shadow boxing 
    image map 
    fun backgrounds 
    fade scrolling 
    em sized images 
     

 
 
 
 

 

MENUS 

 
MENUS 
 
 

     
    spies menu 
    vertical menu 
    enlarging list 
    link images 
    non-rectangular 
    jigsaw links 
    circular links 
     

 
 
 
 

 

LAYOUTS 

 
LAYOUTS 
 
 

     
    Fixed 1 
    Fixed 2 
    Fixed 3 
    Fixed 4 
    minimum width 
     

 
 
 
 

 

BOXES 

 
BOXES 
 
 

     
    spies menu 
    vertical menu 
    enlarging list 
    link images 
    non-rectangular 
    jigsaw links 
    circular links 
     

 
 
 
 

 

MOZILLA 

 
MOZILLA 
 
 

     
    drop down menu 
    cascading menu 
    content: 
    mozzie box 
    rainbow box 
    snooker cue 
    target practise 
    two tone headings 
    shadow text 
     

 
 
 
 

 

EXPLORER 

 
EXPLORER 
 
 

     
    example one 
    weft fonts 
    vertical align 
     

 
 
 
 

 

OPACITY 

 
OPACITY 
 
 

     
    opaque colours 
    opaque menu 
    partial opacity 
    partial opacity II 
     

   
  < HOVER/CLICK 
   
   

         
            styled form 
            active focus 
            hover/click 
         

     
     
   
   

     
     

 
 
 
 

 
 

 

 
 
  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]三、flyout-竖向三级弹出菜单
 
 
 
 
flyout-竖向三级弹出菜单 
 
/* common styling */ 
.menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;} 
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #aaa; background:#710069; line-height:20px; font-size:11px; overflow:hidden;} 
.menu ul {padding:0; margin:0;list-style-type: none; } 
.menu ul li {float:left; margin-right:1px; position:relative;} 
.menu ul li ul {display: none;} 

/* specific to non IE browsers */ 
.menu ul li:hover a {color:#fff; background:#36f;} 
.menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;} 
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;} 
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;} 
.menu ul li:hover ul li ul {display: none;} 
.menu ul li:hover ul li a {display:block; background:#eee; color:#000;} 
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;} 
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;} 

 
 
 
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;} 
.menu ul li a:hover ul li a.hide {display:none;} 

.menu ul li a:hover {color:#fff; background:#36f;} 
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;} 
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;} 
.menu ul li a:hover ul li a {display:block; background:#eee; color:#000;} 
.menu ul li a:hover ul li a ul {visibility:hidden;} 
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;} 
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;} 

 
 
 

 
 
  
 DEMOS 

  
 DEMOS 
  
  

   
  zero dollars 
  wrapping text 
  styled form 
  active focus 
  HOVER/CLICK > 

   
  HOVER/CLICK > 
   
   

    
   styled form 
   active focus 
   hover/click 
    

   
   
   
   

   
  shadow boxing 
  image map 
  fun backgrounds 
  fade scrolling 
  em sized images 
   

   
   
   
   

  

 MENUS 

  
 MENUS 
  
  

   
  spies menu 
  vertical menu 
  enlarging list 
  link images 
  non-rectangular 
  jigsaw links 
  circular links 
   

  
  
  
  

  

 LAYOUTS 

  
 LAYOUTS 
  
  

   
  Fixed 1 
  Fixed 2 
  Fixed 3 
  Fixed 4 
  minimum width 
   

  
  
  
  

  

 BOXES 

  
 BOXES 
  
  

   
  spies menu 
  vertical menu 
  enlarging list 
  link images 
  non-rectangular 
  jigsaw links 
  circular links 
   

  
  
  
  

  

 MOZILLA 

  
 MOZILLA 
  
  

   
  drop down menu 
  cascading menu 
  content: 
  mozzie box 
  rainbow box 
  snooker cue 
  target practise 
  two tone headings 
  shadow text 
   

  
  
  
  

  

 EXPLORER 

  
 EXPLORER 
  
  

   
  example one 
  weft fonts 
  vertical align 
  

  
  
  
  

  

 OPACITY 

  
 OPACITY 
  
  

  
 opaque colours 
 opaque menu 
 partial opacity 
 partial opacity II 
  

  
  
  
  

  
  

 
 
 
  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]四、dropline-水平三级横向弹出菜单
 
 
 
 
dropline-水平三级横向弹出菜单 
 
/* common styling */ 
.menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0; background:#fff; position:relative;} 
.menu ul {padding:0; margin:0; list-style-type: none;} 
.menu ul li {float:left; border-left:1px solid #eee; width:106px;} 
.menu ul li a, .menu ul li a:visited {display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;} 
.menu ul li ul {display: none;} 

/* specific to non IE browsers */ 
.menu ul li:hover a {color:#fff; background:#b3ab79;} 
.menu ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;} 
.menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;} 
.menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;} 
.menu ul li:hover ul li a.hide {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;} 
.menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;} 
.menu ul li:hover ul li ul {display: none;} 
.menu ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;} 
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;} 
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;} 
.menu ul li:hover ul.right li {float:right;} 
.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;} 
.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;} 
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;} 

 
 
 
table {border-collapse:collapse; margin:0; padding:0;} 

.menu ul li a.hide, .menu ul li a:visited.hide {display:none;} 
.menu ul li a:hover ul li a.hide {display:none;} 
.menu ul li a, .menu ul li a:visited {background:#c9c9a7 url(../../graphics/drop.gif) 20px right no-repeat;} 


.menu ul li a:hover {color:#fff; background:#b3ab79;} 
.menu ul li a:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;} 
.menu ul li a:hover ul.right_side li {float:right; border-width:0 1px 0 0 0;} 
.menu ul li a:hover ul.left_side li {float:left;} 
.menu ul li a:hover ul li a.sub {background:#bd8d5e url(../../graphics/drop2.gif) 20px right no-repeat; color:#fff;} 
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;} 
.menu ul li a:hover ul li a ul {visibility:hidden;} 
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;} 
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:0; top:30px; color:#000; background:#dfc184;} 
.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;} 
.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;} 

 
 
 

 

 

 
DEMOS 

 
DEMOS 
 
 

     
    zero dollars 
    wrapping text 
    styled form 
    active focus 

    HOVER/CLICK 

   
  HOVER/CLICK 
   
   

         
            styled form 
            active focus 
            hover/click 
         

     
     
   
   

     

    shadow boxing 
    image map 
     

 
 
 
 

 

MENUS 

 
MENUS 
 
 

     
    spies menu 
    vertical menu 
    enlarging list 
    link images 
    non-rectangular 
    jigsaw links 
    circular links 
     

 
 
 
 

 

LAYOUTS 

 
LAYOUTS 
 
 

     
    Fixed 1 
    Fixed 2 
    Fixed 3 
    Fixed 4 
    minimum width 
     

 
 
 
 

 

BOXES 

 
BOXES 
 
 

     
    spies menu 
    vertical menu 
    enlarging list 
    link images 
    non-rectangular 
    jigsaw links 
    circular links 
     

 
 
 
 

 

MOZILLA 

 
MOZILLA 
 
 

     
    drop down menu 
    cascading menu 
    content: 
    mozzie box 
    rainbow box 
    snooker cue 
    target practise 
     

 
 
 
 

 

EXPLORER 

 
EXPLORER 
 
 

     
    example one 
    weft fonts 
    vertical align 
     

 
 
 
 

 

OPACITY 

 
OPACITY 
 
 

     
    opaque colours 
    opaque menu 
    partial opacity 
    partial opacity II 
    HOVER/CLICK 

   
  HOVER/CLICK 
   
   

         
            styled form 
            active focus 
            hover/click 
         

     
     
   
   

     
     

 
 
 
 

 
 

 
 
 
  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]五、upmenu-水平竖弹向上三级弹出菜单
 
 
 
 
upmenu-水平竖弹向上三级弹出菜单 
 
/* common styling */ 
.menu {font-family: verdana, arial, sans-serif; width:735px; position:relative; font-size:11px; margin:50px auto;} 
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; width:94px; height:25px; text-align:left; color:#000; padding-left:10px; border:1px solid #fff; border-width:0 1px 1px 0; background:#c9c9a7; line-height:25px; font-size:11px;} 
.menu ul {padding:0; margin:0;list-style-type: none; } 
.menu ul li {float:left; position:relative;} 
.menu ul li ul {display: none;} 

/* specific to non IE browsers */ 
.menu ul li:hover a {color:#000; background:#e9e9c7;} 
.menu ul li:hover ul {display:block; position:absolute; bottom:26px; left:0;} 
.menu ul li:hover ul li a.hide {background:#a7c9c9; color:#000;} 
.menu ul li:hover ul li {display:block; background:#fff; color:#000;width:199px; clear:both;} 
.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;} 
.menu ul li:hover ul li ul {display: none;} 
.menu ul li:hover ul li a {display:block; background:#c9a7c9; color:#000; width:100%; padding-left:10px;} 
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;} 
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:210px; bottom:0;} 
.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;} 
.menu ul li:hover ul li:hover ul li a:hover {background:#c9c9a7; color:#000;} 

.menu ul li:hover ul.left {left:-105px;} 
.menu ul li:hover ul li:hover ul.left {left:-210px; width:209px;} 

 
 
 
table {border-collapse:collapse; margin:0; padding:0;} 
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;} 
.menu ul li a:hover ul li a.hide {display:none;} 

.menu ul li a:hover {color:#000; background:#e9e9c7;} 
.menu ul li a:hover ul {display:block; position:absolute; bottom:26px; left:0;} 
.menu ul li a:hover ul li {display:block; background:#fff; color:#000; width:199px;} 
.menu ul li a:hover ul li a.sub {background:#a7c9c9; color:#000;} 
.menu ul li a:hover ul li a {display:block; background:#c9a7c9; color:#000; width:100%; padding-left:10px;} 
.menu ul li a:hover ul li a ul {visibility:hidden;} 
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;} 
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:210px; bottom:0;} 
.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;} 
.menu ul li a:hover ul li a:hover ul li a:hover {background:#c9c9a7; color:#000;} 

.menu ul li a:hover ul.left {left:-105px;} 
.menu ul li a:hover ul li a:hover ul.left {left:-210px;} 

 
 
 

 
  
  
  
  
  
  
  
  
  
 

 
DEMOS 

 
DEMOS 
 
 

     
    zero dollars 
    wrapping text 
    styled form 
    active focus 

    HOVER/CLICK > 

   
  HOVER/CLICK > 
   
   

         
            styled form 
            active focus 
            hover/click 

         

     
     
   
   

     

    shadow boxing 
    image map 
    fun backgrounds 

    fade scrolling 
    em sized images 
     

 
 
 
 

 

MENUS 

 
MENUS 
 
 

     
    spies menu 
    vertical menu 
    enlarging list 
    link images 
    non-rectangular 

    jigsaw links 
    circular links 
     

 
 
 
 

 

LAYOUTS 

 
LAYOUTS 
 
 

     
    Fixed 1 
    Fixed 2 
    Fixed 3 
    Fixed 4 
    minimum width 

     

 
 
 
 

 

BOXES 

 
BOXES 
 
 

     
    spies menu 

    vertical menu 
    enlarging list 
    link images 
    non-rectangular 
    jigsaw links 
    circular links 

     

 
 
 
 

 

MOZILLA 

 
MOZILLA 
 
 

     
    drop down menu 

    cascading menu 
    content: 
    mozzie box 
    rainbow box 
    snooker cue 
    target practise 

    two tone headings 
    shadow text 
     

 
 
 
 

 

EXPLORER 

 
EXPLORER 
 
 

     
    example one 
    weft fonts 
    vertical align 
     

 
 
 
 

 

OPACITY 

 
OPACITY 
 
 

     
     

   
  < HOVER/CLICK 
   
   

         
            styled form 
            active focus 

            hover/click 
         

     
     
   
   

     

    opaque colours 
    opaque menu 
    partial opacity 
    partial opacity II 
     

 
 
 
 

 

 

 
 
 

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