下面是个符合标准的div+css制作的弹出菜单教程，撑握了其技术要点，学起来就简单多了。赶紧跟着小编一起来看看吧！
本文介绍了五款符合标准的div+css制作的弹出菜单,而且不含有js的.
NO.1最基本的：二级dropdown弹出菜单
!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0 Transitional//EN" "&;
html xmlns="&;
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title二级dropdown弹出菜单--A CROSS BROWSERDROP 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;
;
margin:0;
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 willappear in the right place underneath each list item */
.menu ul li {
;
;
}
/* 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 {
;
;
;
;
;
color:#000;
solid #fff;
1px 0 0;
background:#c9c9a7;
line-;
;
}
/* 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 a {
color:#fff;
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul ul {
;
;
;
left:0;
;
}
/* style the background and foreground color of the submenu links */
.menu ul ul li a {
;
background:#faeec7;
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul ul li a:hover {
background:#dfc184;
color:#000;
}
/style
!--[if lte IE 6]
style type="text/css"
/* styling specific to InternetExplorer IE5.5 and IE6. Yet to see if IE7 handles */
/* Get rid of any default table style */
table {
;
margin:0;
padding:0;
}
/* ignore the link used by other browsers */
.menu ul li , .menu ul li a: {
;
}
/* 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 {
;
;
;
left:0;
;
}
/* 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
lia class="hide" href="../menu/&
!--[if lte IE 6]
a href="../menu/&
tabletrtd
![endif]--
ul
lia href="../menu/&; title="The zero dollar ads page"zero dollars/a/li
lia href="../menu/&; title="Wrapping text around images"wrapping text/a/li
lia href="../menu/&; title="Styling forms"styled form/a/li
lia href="../menu/&; title="Removing active/focus borders"active focus/a/li
lia href="../menu/&; title="Multi-position drop shadow"shadow boxing/a/li
lia href="../menu/&; title="Image Map for detailed information"image map/a/li
lia href="../menu/&; title="fun with background images"fun backgrounds/a/li
lia href="../menu/&; title="fade-out scrolling"fade scrolling/a/li
lia href="../menu/&; title="em size images compared"em sized images/a/li
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
lia class="hide" href="&
!--[if lte IE 6]
a href="&
tabletrtd
![endif]--
ul
lia href="&; title="a coded list of spies"spies menu/a/li
lia href="&; title="a horizontal vertical menu"vertical menu/a/li
lia href="&; title="an enlarging unordered list"enlarging list/a/li
lia href="&; title="an unordered list with link images"link images/a/li
lia href="&; title="non-rectangular links"non-rectangular/a/li
lia href="&; title="jigsaw links"jigsaw links/a/li
lia href="&; title="circular links"circular links/a/li
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
lia class="hide" href="../layouts/&
!--[if lte IE 6]
a href="../layouts/&
tabletrtd
![endif]--
ul
lia href="../layouts/&; title="Cross browser fixed layout"Fixed 1/a/li
lia href="../layouts/&; title="Cross browser fixed layout"Fixed 2/a/li
lia href="../layouts/&; title="Cross browser fixed layout"Fixed 3/a/li
lia href="../layouts/&; title="Cross browser fixed layout"Fixed 4/a/li
lia href="../layouts/&; title="A simple minimum width layout"minimum width/a/li
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
lia class="hide" href="../boxes/&
!--[if lte IE 6]
a href="../boxes/&
tabletrtd
![endif]--
ul
lia href="&; title="a coded list of spies"spies menu/a/li
lia href="&; title="a horizontal vertical menu"vertical menu/a/li
lia href="&; title="an enlarging unordered list"enlarging list/a/li
lia href="&; title="an unordered list with link images"link images/a/li
lia href="&; title="non-rectangular links"non-rectangular/a/li
lia href="&; title="jigsaw links"jigsaw links/a/li
lia href="&; title="circular links"circular links/a/li
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
lia class="hide" href="../mozilla/&
!--[if lte IE 6]
a href="../mozilla/&
tabletrtd
![endif]--
ul
lia href="../mozilla/&; title="A drop down menu"drop down menu/a/li
lia href="../mozilla/&; title="A cascading menu"cascading menu/a/li
lia href="../mozilla/&; title="Using content:"
lia href="../mozilla/&; title=":hover applied to a div"mozzie box/a/li
lia href="../mozilla/&; title="I can build a rainbow"rainbow box/a/li
lia href="../mozilla/&; title="Snooker cue"snooker cue/a/li
lia href="../mozilla/&; title="Target Practise"target practise/a/li
lia href="../mozilla/&; title="Two tone headings"two tone headings/a/li
lia href="../mozilla/&; title="Shadow text"shadow text/a/li
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
lia class="hide" href="../ie/&
!--[if lte IE 6]
a href="../ie/&
tabletrtd
![endif]--
ul
lia href="../ie/&; title="Example one"example one/a/li
lia href="../ie/&; title="Weft fonts"weft fonts/a/li
lia href="../ie/&; title="Vertical align"vertical align/a/li
/ul
!--[if lte IE 6]
/td/tr/table
/a
![endif]--
/li
lia class="hide" href="../opacity/&
!--[if lte IE 6]
a href="../opacity/&
tabletrtd
![endif]--
ul
lia href="../opacity/&; title="colour wheel"opaque colours/a/li
lia href="../opacity/&; title="a menu using opacity"opaque menu/a/li
lia href="../opacity/&; title="partial opacity"partial opacity/a/li
lia href="../opacity/&; 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
