<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" [ <!ELEMENT a (#PCDATA | table)*
>
]>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
xml:lang
="en"
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="application/xhtml+xml; charset=UTF-8"
/>
<
title
>
纯CSS下拉菜单，兼容IE和FF
</
title
>
<
style
type
="text/css"
>
 body
{}
{
color
:
#fff
;
}
#wrapper
{}
{
color
:
#000
;
}
.red
{}
{
color
:
#c00
;
}
#info
{}
{
margin-top
:
20px
;
}
#info h1
{}
{
font-size
:
3em
;
text-align
:
center
;
font-family
:
georgia, "times new roman", serif
;
}
#head
{}
{
height
:
145px
;
border
:
0
;
}
#positioner
{}
{
clear
:
both
;
position
:
relative
;
left
:
1px
;
z-index
:
100
;
}
#ads
{}
{
position
:
relative
;
z-index
:
10
;
}
.menu
{}
{
display
:
none
;
}
#noniemenu
{}
{
position
:
absolute
;
}
#noniemenu .holder ul
{}
{
padding
:
0
;
margin
:
0
;
}
#noniemenu .holder ul li
{}
{
list-style-type
:
none
;
}
#noniemenu .holder li
{}
{}
#noniemenu .holder li ul
{}
{
display
:
none
;
}
#noniemenu .holder li:hover > ul#a3
{}
{
display
:
block
;
position
:
absolute
;
left
:
105px
;
margin-top
:
-20px
;
border
:
1px solid #000
;
}
#noniemenu .holder .bold
{}
{
font-weight
:
bold
;
}
#noniemenu .holder
{}
{
color
:
#fff
;
width
:
104px
;
height
:
18px
;
display
:
block
;
overflow
:
hidden
;
float
:
left
;
border
:
1px solid #000
;
margin-right
:
1px
;
font-size
:
10px
;
}
#noniemenu .holder:hover
{}
{
height
:
auto
;
}
#noniemenu a.outer, #noniemenu a.outer:visited
{}
{
color
:
#fff
;
width
:
104px
;
line-height
:
18px
;
display
:
block
;
background
:
#e09222
;
text-align
:
center
;
text-decoration
:
none
;
font-family
:
verdana, arial, sans-serif
;
}
#noniemenu a.outer:hover
{}
{
background
:
#697210
;
overflow
:
visible
;
}
#noniemenu div.open
{}
{
display
:
none
;
}
#noniemenu a.inner, #noniemenu a.inner:visited
{}
{
display
:
block
;
width
:
104px
;
height
:
18px
;
line-height
:
18px
;
border-bottom
:
1px solid #000
;
text-decoration
:
none
;
color
:
#000
;
background
:
#eee
;
text-align
:
center
;
}
#noniemenu a.second
{}
{
font-weight
:
bold
;
}
#noniemenu a.inner:hover
{}
{
background
:
#add
;
}
</
style
>
<!--
[if lte IE 6]>
<style type="text/css">
body {margin-top:-8px;}
#head {height:147px;}
#noniemenu {display:none;}
.menu {display:block; position:absolute;}
.menu a.outer, .menu a.outer:visited {
color:#fff;
width:104px;
height:18px;
display:block;
background:#e09222;
border:1px solid #000;
margin-right:1px;
text-align:center;
float:left;
text-decoration:none;
font-family: verdana, arial, sans-serif;
font-size:10px;
line-height:18px;
overflow:hidden;
}
.menu a.outer:hover {
background:#697210;
overflow:visible;
}
.menu a.outer:hover table.first {
display:block;
background:#eee;
border-collapse:collapse;
}
.menu a.inner, .menu a.inner:visited {
display:block;
width:102px;
height:18px;
border-bottom:1px solid #000;
text-decoration:none;
color:#000;
font-family: verdana, arial, sans-serif;
font-size:10px;
text-align:center;
}
.menu a.inner:hover {
background:#add;
}
.menu a.outer table.first a.second {
height:18px;
line-height:18px;
overflow:hidden;
font-weight:bold;
}
.menu a.outer table.first a.second:hover {
position:relative;
overflow:visible;
}
.menu a.outer table.first a.second:hover table {
position:absolute;
top:-2px;
left:102px;
border-collapse:collapse;
background:#eee;
border:1px solid #000;
font-weight:normal
}
</style>
<![endif]
-->
<!--
[if lte IE 6]>
<style>
#ads {display:none;}
#adsie {clear:both; text-align:center; width:750px; margin-top:10px;}
</style>
<![endif]
-->
</
head
>
<
body
>
<
div
id
="wrapper"
>
<
div
id
="head"
>
<
div
id
="positioner"
>
<
div
class
="menu"
>
<
a
class
="outer"
href
="../menu/index.html"
>
DEMOS
<
table
class
="first"
><
tr
><
td
>
<
a
class
="inner"
href
="../menu/zero_dollars.html"
title
="The zero dollar ads page"
>
zero dollars
</
a
>
<
a
class
="inner"
href
="../menu/embed.html"
title
="Wrapping text around images"
>
wrapping text
</
a
>
<
a
class
="inner"
href
="../menu/form.html"
title
="Styling forms"
>
styled form
</
a
>
<
a
class
="inner"
href
="../menu/nodots.html"
title
="Removing active/focus borders"
>
active focus
</
a
>
<
a
class
="inner second"
href
="../menu/hover_click.html"
title
="Hover/click with no active/focus borders"
>
HOVER/CLICK >
<
table
><
tr
><
td
>
<
a
class
="inner"
href
="../menu/form.html"
title
="Styling forms"
>
styled form
</
a
>
<
a
class
="inner"
href
="../menu/nodots.html"
title
="Removing active/focus borders"
>
active focus
</
a
>
<
a
class
="inner"
href
="../menu/hover_click.html"
title
="Hover/click with no active/focus borders"
>
hover/click
</
a
>
</
td
></
tr
></
table
>
</
a
>
<
a
class
="inner"
href
="../menu/shadow_boxing.html"
title
="Multi-position drop shadow"
>
shadow boxing
</
a
>
<
a
class
="inner"
href
="../menu/old_master.html"
title
="Image Map for detailed information"
>
image map
</
a
>
<
a
class
="inner"
href
="../menu/bodies.html"
title
="fun with background images"
>
fun backgrounds
</
a
>
<
a
class
="inner"
href
="../menu/fade_scroll.html"
title
="fade-out scrolling"
>
fade scrolling
</
a
>
<
a
class
="inner"
href
="../menu/em_images.html"
title
="em size images compared"
>
em sized images
</
a
>
</
td
></
tr
></
table
>
</
a
>
<
a
class
="outer"
href
="index.html"
>
MENUS
<
table
class
="first"
><
tr
><
td
>
<
a
class
="inner"
href
="spies.html"
title
="a coded list of spies"
>
spies menu
</
a
>
<
a
class
="inner"
href
="vertical.html"
title
="a horizontal vertical menu"
>
vertical menu
</
a
>
<
a
class
="inner"
href
="expand.html"
title
="an enlarging unordered list"
>
enlarging list
</
a
>
<
a
class
="inner"
href
="enlarge.html"
title
="an unordered list with link images"
>
link images
</
a
>
<
a
class
="inner"
href
="cross.html"
title
="non-rectangular links"
>
non-rectangular
</
a
>
<
a
class
="inner"
href
="jigsaw.html"
title
="jigsaw links"
>
jigsaw links
</
a
>
<
a
class
="inner"
href
="circles.html"
title
="circular links"
>
circular links
</
a
>
</
td
></
tr
></
table
>
</
a
>
<
a
class
="outer"
href
="../layouts/index.html"
>
LAYOUTS
<
table
class
="first"
><
tr
><
td
>
<
a
class
="inner"
href
="../layouts/bodyfix.html"
title
="Cross browser fixed layout"
>
Fixed 1
</
a
>
<
a
class
="inner"
href
="../layouts/body2.html"
title
="Cross browser fixed layout"
>
Fixed 2
</
a
>
<
a
class
="inner"
href
="../layouts/body4.html"
title
="Cross browser fixed layout"
>
Fixed 3
</
a
>
<
a
class
="inner"
href
="../layouts/body5.html"
title
="Cross browser fixed layout"
>
Fixed 4
</
a
>
<
a
class
="inner"
href
="../layouts/minimum.html"
title
="A simple minimum width layout"
>
minimum width
</
a
>
</
td
></
tr
></
table
>
</
a
>
<
a
class
="outer"
href
="../boxes/index.html"
>
BOXES
<
table
class
="first"
><
tr
><
td
>
<
a
class
="inner"
href
="../boxes/scrollbars.html"
title
="Left scroll bars"
>
left scroll
</
a
>
<
a
class
="inner"
href
="../boxes/floatfix.html"
title
="IE6 3px float fix"
>
IE6 3px fix
</
a
>
<
a
class
="inner"
href
="../boxes/snazzy.html"
title
="Snazzy borders"
>
snazzy borders
</
a
>
<
a
class
="inner"
href
="../boxes/krazy.html"
title
="Krazy Korners"
>
krazy korners
</
a
>
<
a
class
="inner"
href
="../boxes/outside.html"
title
="Percentage PLUS pixels"
>
% PLUS pixels
</
a
>
<
a
class
="inner"
href
="../boxes/minwidth.html"
title
="min-width for IE"
>
IE min-width
</
a
>
<
a
class
="inner"
href
="../boxes/minheight.html"
title
="min-height for IE"
>
IE min-height
</
a
>
</
td
></
tr
></
table
>
</
a
>
<
a
class
="outer"
href
="../mozilla/index.html"
>
MOZILLA
<
table
class
="first"
><
tr
><
td
>
<
a
class
="inner"
href
="../mozilla/dropdown.html"
title
="A drop down menu"
>
drop down menu
</
a
>
<
a
class
="inner"
href
="../mozilla/cascade.html"
title
="A cascading menu"
>
cascading menu
</
a
>
<
a
class
="inner"
href
="../mozilla/content.html"
title
="Using contentquot;>contentlt;/a>
<a class="
inner" href
="../mozilla/moxbox.html"
title
=":hover applied to a div"
>
mozzie box
</
a
>
<
a
class
="inner"
href
="../mozilla/rainbow.html"
title
="I can build a rainbow"
>
rainbow box
</
a
>
<
a
class
="inner"
href
="../mozilla/snooker.html"
title
="Snooker cue"
>
snooker cue
</
a
>
<
a
class
="inner"
href
="../mozilla/target.html"
title
="Target Practise"
>
target practise
</
a
>
<
a
class
="inner"
href
="../mozilla/splittext.html"
title
="Two tone headings"
>
two tone headings
</
a
>
<
a
class
="inner"
href
="../mozilla/shadow_text.html"
title
="Shadow text"
>
shadow text
</
a
>
</
td
></
tr
></
table
>
</
a
>
<
a
class
="outer"
href
="../ie/index.html"
>
EXPLORER
<
table
class
="first"
><
tr
><
td
>
<
a
class
="inner"
href
="../ie/exampleone.html"
title
="Example one"
>
example one
</
a
>
<
a
class
="inner"
href
="../ie/weft.html"
title
="Weft fonts"
>
weft fonts
</
a
>
<
a
class
="inner"
href
="../ie/exampletwo.html"
title
="Vertical align"
>
vertical align
</
a
>
</
td
></
tr
></
table
>
</
a
>
<
a
class
="outer"
href
="../opacty/index.html"
>
OPACITY
<
table
class
="first"
><
tr
><
td
>
<
a
class
="inner"
href
="../opacty/colours.html"
title
="colour wheel"
>
opaque colours
</
a
>
<
a
class
="inner"
href
="../opacty/picturemenu.html"
title
="a menu using opacity"
>
opaque menu
</
a
>
<
a
class
="inner"
href
="../opacty/png.html"
title
="partial opacity"
>
partial opacity
</
a
>
<
a
class
="inner"
href
="../opacty/png2.html"
title
="partial opacity II"
>
partial opacity II
</
a
>
</
td
></
tr
></
table
>
</
a
>
</
div
>
<
div
id
="noniemenu"
>
<
div
class
="holder"
>
<
ul
>
<
li
><
a
class
="outer"
href
="../menu/index.html"
>
DEMOS
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../menu/zero_dollars.html"
title
="The zero dollar ads page"
>
zero dollars
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../menu/embed.html"
title
="Wrapping text around images"
>
wrapping text
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../menu/form.html"
title
="Styling forms"
>
styled form
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../menu/nodots.html"
title
="Removing active/focus borders"
>
active focus
</
a
></
li
>
<
li
><
a
class
="inner second"
href
="../menu/hover_click.html"
title
="Hover/click with no active/focus borders"
>
HOVER/CLICK >
</
a
>
<
ul
id
="a3"
>
<
li
><
a
class
="inner"
href
="../menu/form.html"
title
="Styling forms"
>
styled form
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../menu/nodots.html"
title
="Removing active/focus borders"
>
active focus
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../menu/hover_click.html"
title
="Hover/click with no active/focus borders"
>
hover/click
</
a
></
li
>
</
ul
>
</
li
>
<
li
><
a
class
="inner"
href
="../menu/shadow_boxing.html"
title
="Multi-position drop shadow"
>
shadow boxing
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../menu/old_master.html"
title
="Image Map for detailed information"
>
image map
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../menu/bodies.html"
title
="fun with background images"
>
fun backgrounds
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../menu/fade_scroll.html"
title
="fade-out scrolling"
>
fade scrolling
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../menu/em_images.html"
title
="em size images compared"
>
em sized images
</
a
></
li
>
</
ul
>
</
div
>
<
div
class
="holder"
>
<
ul
>
<
li
><
a
class
="outer"
href
="index.html"
>
MENUS
</
a
></
li
>
<
li
><
a
class
="inner"
href
="spies.html"
title
="a coded list of spies"
>
spies menu
</
a
></
li
>
<
li
><
a
class
="inner"
href
="vertical.html"
title
="a horizontal vertical menu"
>
vertical menu
</
a
></
li
>
<
li
><
a
class
="inner"
href
="expand.html"
title
="an enlarging unordered list"
>
enlarging list
</
a
></
li
>
<
li
><
a
class
="inner"
href
="enlarge.html"
title
="an unordered list with link images"
>
link images
</
a
></
li
>
<
li
><
a
class
="inner"
href
="cross.html"
title
="non-rectangular links"
>
non-rectangular
</
a
></
li
>
<
li
><
a
class
="inner"
href
="jigsaw.html"
title
="jigsaw links"
>
jigsaw links
</
a
></
li
>
<
li
><
a
class
="inner"
href
="circles.html"
title
="circular links"
>
circular links
</
a
></
li
>
</
ul
>
</
div
>
<
div
class
="holder"
>
<
ul
>
<
li
><
a
class
="outer"
href
="../layouts/index.html"
>
LAYOUTS
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../layouts/bodyfix.html"
title
="Cross browser fixed layout"
>
Fixed 1
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../layouts/body2.html"
title
="Cross browser fixed layout"
>
Fixed 2
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../layouts/body4.html"
title
="Cross browser fixed layout"
>
Fixed 3
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../layouts/body5.html"
title
="Cross browser fixed layout"
>
Fixed 4
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../layouts/minimum.html"
title
="A simple minimum width layout"
>
minimum width
</
a
></
li
>
</
ul
>
</
div
>
<
div
class
="holder"
>
<
ul
>
<
li
><
a
class
="outer"
href
="../boxes/index.html"
>
BOXES
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../boxes/scrollbars.html"
title
="Left scroll bars"
>
left scroll
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../boxes/floatfix.html"
title
="IE6 3px float fix"
>
IE6 3px fix
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../boxes/snazzy.html"
title
="Snazzy borders"
>
snazzy borders
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../boxes/krazy.html"
title
="Krazy Korners"
>
krazy korners
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../boxes/outside.html"
title
="Percentage PLUS pixels"
>
% PLUS pixels
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../boxes/minwidth.html"
title
="min-width for IE"
>
IE min-width
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../boxes/minheight.html"
title
="min-height for IE"
>
IE min-height
</
a
></
li
>
</
ul
>
</
div
>
<
div
class
="holder"
>
<
ul
>
<
li
><
a
class
="outer"
href
="../mozilla/index.html"
>
MOZILLA
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../mozilla/dropdown.html"
title
="A drop down menu"
>
drop down menu
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../mozilla/cascade.html"
title
="A cascading menu"
>
cascading menu
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../mozilla/content.html"
title
="Using contentquot;>contentlt;/a></li>
<li><a class="
inner" href
="../mozilla/moxbox.html"
title
=":hover applied to a div"
>
mozzie box
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../mozilla/rainbow.html"
title
="I can build a rainbow"
>
rainbow box
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../mozilla/snooker.html"
title
="Snooker cue"
>
snooker cue
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../mozilla/target.html"
title
="Target Practise"
>
target practise
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../mozilla/splittext.html"
title
="Two tone headings"
>
two tone headings
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../mozilla/shadow_text.html"
title
="Shadow text"
>
shadow text
</
a
></
li
>
</
ul
>
</
div
>
<
div
class
="holder"
>
<
ul
>
<
li
><
a
class
="outer"
href
="../ie/index.html"
>
EXPLORER
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../ie/exampleone.html"
title
="Example one"
>
example one
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../ie/weft.html"
title
="Weft fonts"
>
weft fonts
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../ie/exampletwo.html"
title
="Vertical align"
>
vertical align
</
a
></
li
>
</
ul
>
</
div
>
<
div
class
="holder"
>
<
ul
>
<
li
><
a
class
="outer"
href
="../opacty/index.html"
>
OPACITY
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../opacty/colours.html"
title
="colour wheel"
>
opaque colours
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../opacty/picturemenu.html"
title
="a menu using opacity"
>
opaque menu
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../opacty/png.html"
title
="partial opacity"
>
partial opacity
</
a
></
li
>
<
li
><
a
class
="inner"
href
="../opacty/png2.html"
title
="partial opacity II"
>
partial opacity II
</
a
></
li
>
</
ul
>
</
div
>
</
div
>
</
div
>
</
div
>
<!--
end of head
-->
<
div
id
="info"
>
<
h2
>
DROP DOWN FUN
</
h2
>
<
h1
>
NO JAVASCRIPT
</
h1
>
<
h1
>
JUST CSS!!!
</
h1
>
<
h1
class
="red"
>
NOW WITH CASCADE
</
h1
>
</
div
>
</
div
>
</
body
>
</
html
>
演示路径： http://www.evance.name/article.asp?id=202
|