搜索
首页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
相关文章
HTML超文本标记语言--超在那里？（文档分析）HTML超文本标记语言--超在那里？（文档分析）Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML（超文本标记语言），介绍一下HTML的本质，HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单，希望对大家有所帮助！

html和css算编程语言吗html和css算编程语言吗Sep 21, 2022 pm 04:09 PM

不算。html是一种用来告知浏览器如何组织页面的标记语言，而CSS是一种用来表现HTML或XML等文件样式的样式设计语言；html和css不具备很强的逻辑性和流程控制功能，缺乏灵活性，且html和css不能按照人类的设计对一件工作进行重复的循环，直至得到让人类满意的答案。

web前端笔试题库之HTML篇web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试（笔试）题分享给大家，本篇文章就先给大家分享HTML部分的笔试题（附答案），大家可以自己做做，看看能答对几个！

HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

总结HTML中a标签的使用方法及跳转方式总结HTML中a标签的使用方法及跳转方式Aug 05, 2022 am 09:18 AM

本文给大家总结介绍a标签使用方法和跳转方式，希望对大家有所帮助！

html中document是什么html中document是什么Jun 17, 2022 pm 04:18 PM

在html中，document是文档对象的意思，代表浏览器窗口的文档；document对象是window对象的子对象，所以可通过“window.document”属性对其进行访问，每个载入浏览器的HTML文档都会成为Document对象。

html5废弃了哪个列表标签html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。

html5支持boolean值属性吗html5支持boolean值属性吗Apr 22, 2022 pm 04:56 PM

html5支持boolean值属性；boolean值属性指是属性值为true或者false的属性，如input元素中的disabled属性，不使用该属性表示值为flase，不禁用元素，使用该属性可以不设置属性值表示值为true，禁用元素。

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脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库：如何复兴队友
1 个月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险：如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌
击败分裂小说需要多长时间？
3 周前ByDDD
R.E.P.O.保存文件位置：在哪里以及如何保护它？
3 周前ByDDD
显示更多

热工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具，用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

SublimeText3 英文版

SublimeText3 英文版

推荐：为Win版本，支持代码提示！

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

显示更多

热门话题

gmail邮箱登陆入口在哪里
7342
9
Java教程
1627
14
CakePHP 教程
1352
46
Laravel 教程
1265
25
PHP教程
1210
29
显示更多