<!
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
|