Home > Article > Web Front-end > 5 pop-up menus made with pure div css (no js)
5 pop-up menus made with pure div css (no js)
- PHP中文网Original
- 2016-05-16 12:07:261487browse
1. the most basic: the second-level dropdown pop-up menu
<!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 'other browsers' */
.menu ul li a.hide, .menu ul li a:visited.hide {
display:none;
}
/* set the background and foreground color of the main menu link on hover */
.menu ul li a:hover {
color:#fff;
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li a:hover ul {
display:block;
position:absolute;
top:32px;
left:0;
width:105px;
}
/* style the background and foreground color of the submenu links */
.menu ul li a:hover ul li a {
background:#faeec7;
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul li a:hover ul li a:hover {
background:#dfc184;
color:#000;
}
</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>the second and third-level dropdown pop-up menu
<!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>3. flyout-vertical three-level pop-up menu
<!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>4. dropline-horizontal three-level horizontal pop-up menu
p><!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>5. upmenu- horizontal and vertical pop-up menu up to three levels
<!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>Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Differences in DIV support between IE6, IE7 and Firefox_Experience exchangeNext article：Differences in DIV support between IE6, IE7 and Firefox_Experience exchange
Related articles
See more- What is the Most Essential Font File Format for Modern Web and Mobile Platforms?
- How to Set Custom Cursor Images in CSS, Especially in Firefox?
- How to Achieve Flexible Column Widths in Tables using CSS Calc() and Table-Layout?
- How to Create a Slanted Div Without Using Borders in CSS?
- How to Vertically Center Text in a Div of Unknown Height?