搜索
首页web前端css教程5款纯div+css制作的弹出菜单（无js）

5款纯div+css制作的弹出菜单（无js）

PHP中文网
PHP中文网
May 16, 2016 pm 12:07 PM
html

一、最基本的：二级dropdown弹出菜单 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>二级dropdown弹出菜单--A CROSS BROWSER Drop DOWN CASCADING VALIDATING MENU</title> 
<style type="text/css"> 
/* 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; 
} 

</style> 
<!--[if lte IE 6]> 

<style type="text/css"> 
/* 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 &#39;other browsers&#39; */ 
.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; 
} 

</style> 

<![endif]--> 
</head> 

<body> 

<div class="menu"> 

<ul> 
<li><a class="hide" href="../menu/index.html">DEMOS</a> 

<!--[if lte IE 6]> 
<a href="../menu/index.html">DEMOS 
<table><tr><td> 
<![endif]--> 

    <ul> 
    <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li> 
    <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li> 
    <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> 
    <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> 
    <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> 
    <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li> 
    <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li> 
    <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> 
    <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 

<li><a class="hide" href="index.html">MENUS</a> 

<!--[if lte IE 6]> 
<a href="index.html">MENUS 
<table><tr><td> 
<![endif]--> 

    <ul> 
    <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> 
    <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> 
    <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> 
    <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> 
    <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> 
    <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> 
    <li><a href="circles.html" title="circular links">circular links</a></li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 

<li><a class="hide" href="../layouts/index.html">LAYOUTS</a> 

<!--[if lte IE 6]> 
<a href="../layouts/index.html">LAYOUTS 
<table><tr><td> 
<![endif]--> 

    <ul> 
    <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li> 
    <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li> 
    <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li> 
    <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li> 
    <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 

<li><a class="hide" href="../boxes/index.html">BOXES</a> 

<!--[if lte IE 6]> 
<a href="../boxes/index.html">BOXES 
<table><tr><td> 
<![endif]--> 

    <ul> 
    <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> 
    <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> 
    <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> 
    <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> 
    <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> 
    <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> 
    <li><a href="circles.html" title="circular links">circular links</a></li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 

<li><a class="hide" href="../mozilla/index.html">MOZILLA</a> 

<!--[if lte IE 6]> 
<a href="../mozilla/index.html">MOZILLA 
<table><tr><td> 
<![endif]--> 

    <ul> 
    <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> 
    <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> 
    <li><a href="../mozilla/content.html" title="Using content:">content:</a></li> 
    <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> 
    <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li> 
    <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li> 
    <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li> 
    <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li> 
    <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 

<li><a class="hide" href="../ie/index.html">EXPLORER</a> 

<!--[if lte IE 6]> 
<a href="../ie/index.html">EXPLORER 
<table><tr><td> 
<![endif]--> 

    <ul> 
    <li><a href="../ie/exampleone.html" title="Example one">example one</a></li> 
    <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li> 
    <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 

<li><a class="hide" href="../opacity/index.html">OPACITY</a> 

<!--[if lte IE 6]> 
<a href="../opacity/index.html">OPACITY 
<table><tr><td> 
<![endif]--> 

    <ul> 
    <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li> 
    <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li> 
    <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li> 
    <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 
</ul> 

<!-- clear the floats if required --> 
<div class="clear"> </div> 

</div> 
</body> 
</html>


二、三级dropdown弹出菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>三级dropdown弹出菜单</title> 
<style type="text/css"> 
/* 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;} 

</style> 
<!--[if lte IE 6]> 
<style type="text/css"> 
.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;} 

</style> 
<![endif]--> 
</head> 

<body> 

<div class="menu"> 

<ul> 
<li><a class="hide" href="../menu/index.html">DEMOS</a> 

<!--[if lte IE 6]> 
<a href="../menu/index.html">DEMOS 
<table><tr><td> 
<![endif]--> 

    <ul> 
    <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li> 
    <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li> 
    <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> 
    <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> 

    <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a> 

  <!--[if lte IE 6]> 
  <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK > 
  <table><tr><td> 
  <![endif]--> 

        <ul> 
            <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> 
            <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> 
            <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> 
        </ul> 

    <!--[if lte IE 6]> 
    </td></tr></table> 
  </a> 
  <![endif]--> 

    </li> 

    <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> 
    <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li> 
    <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li> 
    <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> 
    <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 

<li><a class="hide" href="index.html">MENUS</a> 

<!--[if lte IE 6]> 
<a href="index.html">MENUS 
<table><tr><td> 
<![endif]--> 

    <ul> 
    <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> 
    <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> 
    <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> 
    <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> 
    <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> 
    <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> 
    <li><a href="circles.html" title="circular links">circular links</a></li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 

<li><a class="hide" href="../layouts/index.html">LAYOUTS</a> 

<!--[if lte IE 6]> 
<a href="../layouts/index.html">LAYOUTS 
<table><tr><td> 
<![endif]--> 

    <ul> 
    <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li> 
    <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li> 
    <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li> 
    <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li> 
    <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 

<li><a class="hide" href="../boxes/index.html">BOXES</a> 

<!--[if lte IE 6]> 
<a href="../boxes/index.html">BOXES 
<table><tr><td> 
<![endif]--> 

    <ul> 
    <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> 
    <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> 
    <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> 
    <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> 
    <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> 
    <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> 
    <li><a href="circles.html" title="circular links">circular links</a></li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 

<li><a class="hide" href="../mozilla/index.html">MOZILLA</a> 

<!--[if lte IE 6]> 
<a href="../mozilla/index.html">MOZILLA 
<table><tr><td> 
<![endif]--> 

    <ul> 
    <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> 
    <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> 
    <li><a href="../mozilla/content.html" title="Using content:">content:</a></li> 
    <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> 
    <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li> 
    <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li> 
    <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li> 
    <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li> 
    <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 

<li><a class="hide" href="../ie/index.html">EXPLORER</a> 

<!--[if lte IE 6]> 
<a href="../ie/index.html">EXPLORER 
<table><tr><td> 
<![endif]--> 

    <ul> 
    <li><a href="../ie/exampleone.html" title="Example one">example one</a></li> 
    <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li> 
    <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 

<li><a class="hide" href="../opacity/index.html">OPACITY</a> 

<!--[if lte IE 6]> 
<a href="../opacity/index.html">OPACITY 
<table><tr><td> 
<![endif]--> 

    <ul> 
    <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li> 
    <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li> 
    <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li> 
    <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li> 
    <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK</a> 

  <!--[if lte IE 6]> 
  <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK 
  <table><tr><td> 
  <![endif]--> 

        <ul class="left"> 
            <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> 
            <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> 
            <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> 
        </ul> 

    <!--[if lte IE 6]> 
    </td></tr></table> 
  </a> 
  <![endif]--> 

    </li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 
</ul> 

</div> 

</body> 
</html>


三、flyout-竖向三级弹出菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>flyout-竖向三级弹出菜单</title> 
<style type="text/css"> 
/* 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;} 

</style> 
<!--[if lte IE 6]> 
<style type="text/css"> 
.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;} 

</style> 
<![endif]--> 
</head> 

<body> 
<div class="menu"> 
 <ul> 
 <li><a class="hide" href="../menu/index.html">DEMOS</a> 

 <!--[if lte IE 6]> 
 <a href="../menu/index.html">DEMOS 
 <table><tr><td> 
 <![endif]--> 

  <ul> 
  <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li> 
  <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li> 
  <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> 
  <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> 
  <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a> 

  <!--[if lte IE 6]> 
  <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK > 
  <table><tr><td> 
  <![endif]--> 

   <ul> 
   <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> 
   <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> 
   <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> 
   </ul> 

  <!--[if lte IE 6]> 
  </td></tr></table> 
  </a> 
  <![endif]--> 

  </li> 
  <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> 
  <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li> 
  <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li> 
  <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> 
  <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li> 
  </ul> 

  <!--[if lte IE 6]> 
  </td></tr></table> 
  </a> 
  <![endif]--> 

 </li> 

 <li><a class="hide" href="index.html">MENUS</a> 

 <!--[if lte IE 6]> 
 <a href="index.html">MENUS 
 <table><tr><td> 
 <![endif]--> 

  <ul> 
  <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> 
  <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> 
  <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> 
  <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> 
  <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> 
  <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> 
  <li><a href="circles.html" title="circular links">circular links</a></li> 
  </ul> 

 <!--[if lte IE 6]> 
 </td></tr></table> 
 </a> 
 <![endif]--> 

 </li> 

 <li><a class="hide" href="../layouts/index.html">LAYOUTS</a> 

 <!--[if lte IE 6]> 
 <a href="../layouts/index.html">LAYOUTS 
 <table><tr><td> 
 <![endif]--> 

  <ul> 
  <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li> 
  <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li> 
  <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li> 
  <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li> 
  <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li> 
  </ul> 

 <!--[if lte IE 6]> 
 </td></tr></table> 
 </a> 
 <![endif]--> 

 </li> 

 <li><a class="hide" href="../boxes/index.html">BOXES</a> 

 <!--[if lte IE 6]> 
 <a href="../boxes/index.html">BOXES 
 <table><tr><td> 
 <![endif]--> 

  <ul> 
  <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> 
  <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> 
  <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> 
  <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> 
  <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> 
  <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> 
  <li><a href="circles.html" title="circular links">circular links</a></li> 
  </ul> 

 <!--[if lte IE 6]> 
 </td></tr></table> 
 </a> 
 <![endif]--> 

 </li> 

 <li><a class="hide" href="../mozilla/index.html">MOZILLA</a> 

 <!--[if lte IE 6]> 
 <a href="../mozilla/index.html">MOZILLA 
 <table><tr><td> 
 <![endif]--> 

  <ul> 
  <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> 
  <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> 
  <li><a href="../mozilla/content.html" title="Using content:">content:</a></li> 
  <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> 
  <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li> 
  <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li> 
  <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li> 
  <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li> 
  <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li> 
  </ul> 

 <!--[if lte IE 6]> 
 </td></tr></table> 
 </a> 
 <![endif]--> 

 </li> 

 <li><a class="hide" href="../ie/index.html">EXPLORER</a> 

 <!--[if lte IE 6]> 
 <a href="../ie/index.html">EXPLORER 
 <table><tr><td> 
 <![endif]--> 

  <ul> 
  <li><a href="../ie/exampleone.html" title="Example one">example one</a></li> 
  <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li> 
  <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li> 
 </ul> 

 <!--[if lte IE 6]> 
 </td></tr></table> 
 </a> 
 <![endif]--> 

 </li> 

 <li><a class="hide" href="../opacity/index.html">OPACITY</a> 

 <!--[if lte IE 6]> 
 <a href="../opacity/index.html">OPACITY 
 <table><tr><td> 
 <![endif]--> 

 <ul> 
 <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li> 
 <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li> 
 <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li> 
 <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li> 
 </ul> 

 <!--[if lte IE 6]> 
 </td></tr></table> 
 </a> 
 <![endif]--> 

 </li> 
 </ul> 

</div> 
</body> 
</html>


四、dropline-水平三级横向弹出菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>dropline-水平三级横向弹出菜单</title> 
<style type="text/css"> 
/* 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;} 

</style> 
<!--[if lte IE 6]> 
<style type="text/css"> 
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;} 

</style> 
<![endif]--> 
</head> 

<body> 

<div class="menu"> 

<ul> 
<li><a class="hide" href="../menu/index.html">DEMOS</a> 

<!--[if lte IE 6]> 
<a href="../menu/index.html">DEMOS 
<table><tr><td> 
<![endif]--> 

    <ul> 
    <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li> 
    <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li> 
    <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> 
    <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> 

    <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a> 

  <!--[if lte IE 6]> 
  <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK 
  <table><tr><td> 
  <![endif]--> 

        <ul class="right_side"> 
            <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> 
            <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> 
            <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> 
        </ul> 

    <!--[if lte IE 6]> 
    </td></tr></table> 
  </a> 
  <![endif]--> 

    </li> 

    <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> 
    <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 

<li><a class="hide" href="index.html">MENUS</a> 

<!--[if lte IE 6]> 
<a href="index.html">MENUS 
<table><tr><td> 
<![endif]--> 

    <ul> 
    <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> 
    <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> 
    <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> 
    <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> 
    <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> 
    <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> 
    <li><a href="circles.html" title="circular links">circular links</a></li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 

<li><a class="hide" href="../layouts/index.html">LAYOUTS</a> 

<!--[if lte IE 6]> 
<a href="../layouts/index.html">LAYOUTS 
<table><tr><td> 
<![endif]--> 

    <ul> 
    <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li> 
    <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li> 
    <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li> 
    <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li> 
    <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 

<li><a class="hide" href="../boxes/index.html">BOXES</a> 

<!--[if lte IE 6]> 
<a href="../boxes/index.html">BOXES 
<table><tr><td> 
<![endif]--> 

    <ul> 
    <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> 
    <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> 
    <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> 
    <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> 
    <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> 
    <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> 
    <li><a href="circles.html" title="circular links">circular links</a></li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 

<li><a class="hide" href="../mozilla/index.html">MOZILLA</a> 

<!--[if lte IE 6]> 
<a href="../mozilla/index.html">MOZILLA 
<table><tr><td> 
<![endif]--> 

    <ul> 
    <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> 
    <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> 
    <li><a href="../mozilla/content.html" title="Using content:">content:</a></li> 
    <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> 
    <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li> 
    <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li> 
    <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 

<li><a class="hide" href="../ie/index.html">EXPLORER</a> 

<!--[if lte IE 6]> 
<a href="../ie/index.html">EXPLORER 
<table><tr><td> 
<![endif]--> 

    <ul class="right_side"> 
    <li><a href="../ie/exampleone.html" title="Example one">example one</a></li> 
    <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li> 
    <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 

<li><a class="hide" href="../opacity/index.html">OPACITY</a> 

<!--[if lte IE 6]> 
<a href="../opacity/index.html">OPACITY 
<table><tr><td> 
<![endif]--> 

    <ul class="right_side"> 
    <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li> 
    <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li> 
    <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li> 
    <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li> 
    <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a> 

  <!--[if lte IE 6]> 
  <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK 
  <table><tr><td> 
  <![endif]--> 

        <ul class="left_side"> 
            <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> 
            <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> 
            <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> 
        </ul> 

    <!--[if lte IE 6]> 
    </td></tr></table> 
  </a> 
  <![endif]--> 

    </li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 
</ul> 

</div> 
</body> 
</html>


五、upmenu-水平竖弹向上三级弹出菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>upmenu-水平竖弹向上三级弹出菜单</title> 
<style type="text/css"> 
/* 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;} 

</style> 
<!--[if lte IE 6]> 
<style type="text/css"> 
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;} 

</style> 
<![endif]--> 
</head> 

<body> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<div class="menu"> 

<ul> 
<li><a class="hide" href="../menu/index.html">DEMOS</a> 

<!--[if lte IE 6]> 
<a href="../menu/index.html">DEMOS 
<table><tr><td> 
<![endif]--> 

    <ul> 
    <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li> 
    <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li> 
    <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> 
    <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> 

    <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a> 

  <!--[if lte IE 6]> 
  <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK > 
  <table><tr><td> 
  <![endif]--> 

        <ul> 
            <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> 
            <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> 
            <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> 

        </ul> 

    <!--[if lte IE 6]> 
    </td></tr></table> 
  </a> 
  <![endif]--> 

    </li> 

    <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> 
    <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li> 
    <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li> 

    <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> 
    <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 

<li><a class="hide" href="index.html">MENUS</a> 

<!--[if lte IE 6]> 
<a href="index.html">MENUS 
<table><tr><td> 
<![endif]--> 

    <ul> 
    <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> 
    <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> 
    <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> 
    <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> 
    <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> 

    <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> 
    <li><a href="circles.html" title="circular links">circular links</a></li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 

<li><a class="hide" href="../layouts/index.html">LAYOUTS</a> 

<!--[if lte IE 6]> 
<a href="../layouts/index.html">LAYOUTS 
<table><tr><td> 
<![endif]--> 

    <ul> 
    <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li> 
    <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li> 
    <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li> 
    <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li> 
    <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li> 

    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 

<li><a class="hide" href="../boxes/index.html">BOXES</a> 

<!--[if lte IE 6]> 
<a href="../boxes/index.html">BOXES 
<table><tr><td> 
<![endif]--> 

    <ul> 
    <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> 

    <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> 
    <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> 
    <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> 
    <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> 
    <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> 
    <li><a href="circles.html" title="circular links">circular links</a></li> 

    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 

<li><a class="hide" href="../mozilla/index.html">MOZILLA</a> 

<!--[if lte IE 6]> 
<a href="../mozilla/index.html">MOZILLA 
<table><tr><td> 
<![endif]--> 

    <ul> 
    <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> 

    <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> 
    <li><a href="../mozilla/content.html" title="Using content:">content:</a></li> 
    <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> 
    <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li> 
    <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li> 
    <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li> 

    <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li> 
    <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 

<li><a class="hide" href="../ie/index.html">EXPLORER</a> 

<!--[if lte IE 6]> 
<a href="../ie/index.html">EXPLORER 
<table><tr><td> 
<![endif]--> 

    <ul> 
    <li><a href="../ie/exampleone.html" title="Example one">example one</a></li> 
    <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li> 
    <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 

<li><a class="hide" href="../opacity/index.html">OPACITY</a> 

<!--[if lte IE 6]> 
<a href="../opacity/index.html">OPACITY 
<table><tr><td> 
<![endif]--> 

    <ul class="left"> 
    <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK</a> 

  <!--[if lte IE 6]> 
  <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK 
  <table><tr><td> 
  <![endif]--> 

        <ul class="left"> 
            <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> 
            <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> 

            <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> 
        </ul> 

    <!--[if lte IE 6]> 
    </td></tr></table> 
  </a> 
  <![endif]--> 

    </li> 

    <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li> 
    <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li> 
    <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li> 
    <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li> 
    </ul> 

<!--[if lte IE 6]> 
</td></tr></table> 
</a> 
<![endif]--> 

</li> 

</ul> 

</div> 
</body> 
</html>


声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
光标的下一个CSS样式光标的下一个CSS样式Apr 23, 2025 am 11:04 AM

具有CSS的自定义光标很棒，但是我们可以将JavaScript提升到一个新的水平。使用JavaScript，我们可以在光标状态之间过渡，将动态文本放置在光标中，应用复杂的动画并应用过滤器。

世界碰撞：使用样式查询的钥匙帧碰撞检测世界碰撞：使用样式查询的钥匙帧碰撞检测Apr 23, 2025 am 10:42 AM

互动CSS动画和元素相互启动的元素在2025年似乎更合理。虽然不需要在CSS中实施乒乓球，但CSS的灵活性和力量的增加，可以怀疑Lee＆Aver Lee＆Aver Lee有一天将是一场

使用CSS背景过滤器进行UI效果使用CSS背景过滤器进行UI效果Apr 23, 2025 am 10:20 AM

有关利用CSS背景滤波器属性来样式用户界面的提示和技巧。您将学习如何在多个元素之间进行背景过滤器，并将它们与其他CSS图形效果集成在一起以创建精心设计的设计。

微笑吗？微笑吗？Apr 23, 2025 am 09:57 AM

好吧，事实证明，SVG的内置动画功能从未按计划进行弃用。当然，CSS和JavaScript具有承载负载的能力，但是很高兴知道Smil并没有像以前那样死在水中

'漂亮”在情人眼中'漂亮”在情人眼中Apr 23, 2025 am 09:40 AM

是的，让＃039;跳上文字包装：Safari Technology Preview In Pretty Landing！但是请注意，它与在铬浏览器中的工作方式不同。

CSS-tricks编年史XLIIICSS-tricks编年史XLIIIApr 23, 2025 am 09:35 AM

此CSS-tricks更新了，重点介绍了年鉴，最近的播客出现，新的CSS计数器指南以及增加了几位新作者，这些新作者贡献了有价值的内容。

tailwind的@Apply功能比听起来更好tailwind的@Apply功能比听起来更好Apr 23, 2025 am 09:23 AM

在大多数情况下，人们展示了@Apply的@Apply功能，其中包括Tailwind的单个property实用程序之一（会改变单个CSS声明）。当以这种方式展示时，@Apply听起来似乎很有希望。如此明显

感觉就像我没有释放：走向理智的旅程感觉就像我没有释放：走向理智的旅程Apr 23, 2025 am 09:19 AM

像白痴一样部署的部署归结为您部署的工具与降低复杂性与添加的复杂性之间的奖励之间的不匹配。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

刺客信条阴影：贝壳谜语解决方案
3 周前ByDDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前ByDDD
在哪里可以找到原子中的起重机控制钥匙卡
3 周前ByDDD
<🎜>：死铁路 - 如何完成所有挑战
4 周前ByDDD
Atomfall指南：项目位置，任务指南和技巧
1 个月前ByDDD
显示更多

热工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境，用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问，并防止学生使用未经授权的资源。

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。

显示更多

热门话题

gmail邮箱登陆入口在哪里
7685
15
Java教程
1639
14
CakePHP 教程
1393
52
Laravel 教程
1287
25
PHP教程
1229
29
显示更多