完全css弹出菜单

<!doctype html public -//w3c//dtd xhtml 1.0 transitional//en >
<html xmlns=>
/ O; h- y) E9 M8 y<head>
  p% u  ^" s- g3 t<meta http-equiv=content-type content=text/html; charset=gb2312 />
8 _( M' {# J' z<title>弹出菜单</title>
2 m" M+ C, B8 c0 g* K8 D<style type=text/css>
2 `& [# K/ E0 F% }9 M1 A' E  m/* common styling */
* F; P  v# o2 j- l- J.menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;}
1 g2 f3 Z' ]0 R$ |.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;}
# {/ o; l6 H- G! u/* specific to non ie browsers */
" L# H' [$ S; Q3 K( B8 v% n5 p6 C.menu ul li:hover a {color:#fff; background:#36f;}
) ~1 M- {7 p/ J) ?" Z: P( C1 e.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
3 M8 q: A( @6 u- f( i$ ~) F4 Z- ^) b.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
4 @" ^* L* p+ j1 N! }2 T5 l4 ~.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
& L1 B  O+ I! y( G- t& v6 M, h) ^, T.menu ul li:hover ul li ul {display: none;}
! b- P  L% \* ?; G' O.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;}
1 p; K+ ?# W0 t( x2 _.menu ul li:hover ul li:hover ul.left {left:-105px;}
</style>
9 I3 g4 c& }: j<!--[if lte ie 6]>
- J; S! T6 T9 j( ~6 X/ s1 F<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;}
" u7 K- r( P& M- \7 R.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;}
0 t8 Q  Q/ A% K) l, g& @.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;}
' I; e7 Z* b- H# L0 Z" t& M; Y.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
" p/ W! D3 g( ^$ m/ X2 n; v.menu ul li a:hover ul li a:hover ul.left {left:-105px;}
/ e( F* l( E) c! P7 n+ u</style>
<![endif]-->
8 E! I, q; E% h, l( z) R) @, O! N8 a7 h4 y</head>
3 @  w) G6 k! N4 v( m) X' d<body>
+ v& d$ c" m) z- {4 y<div class=menu>
9 g  \. o- X$ X- d8 a" k5 N<ul>
<li><a class=hide href=../menu/index.html>demos</a>
<!--[if lte ie 6]>
<a href=../menu/index.html>demos
% r  d: Q' I  g; c. j' I<table><tr><td>
<![endif]-->
<ul>
<li><a href=../menu/zero_dollars.html title=the zero dollar ads page>zero dollars</a></li>
; Z+ H" h" G( {$ Z! I  ^$ ~; M<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>
( L' i/ T0 ?* d5 B: D* a$ m5 _<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]>
' L3 a/ U  @! O9 p2 I- h4 G! T4 B<a class=sub href=../menu/hover_click.html title=hover/click with no active/focus borders>hover/click >
' g) x( `3 c, J4 E3 |<table><tr><td>
<![endif]-->
+ i9 \9 U8 d8 B' ?1 M<ul>
<li><a href=../menu/form.html title=styling forms>styled form</a></li>
0 J' W# R( q* k- u& o<li><a href=../menu/nodots.html title=removing active/focus borders>active focus</a></li>
; t$ e& N' P; |) f2 t<li><a href=../menu/hover_click.html title=hover/click with no active/focus borders>hover/click</a></li>
</ul>
# y% O! w, m/ P& h# F<!--[if lte ie 6]>
& h1 G& R1 W0 I5 s1 p" e</td></tr></table>
</a>
<![endif]-->
</li>
<li><a href=../menu/shadow_boxing.html title=multi-position drop shadow>shadow boxing</a></li>
, s1 |( ^, h' K) w  s9 y<li><a href=../menu/old_master.html title=image map for detailed information>image map</a></li>
1 k4 s- {* Q$ B- l; E4 F, c<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>
* [( e# Y/ W, S  q</ul>
$ L0 O% ?; `% F2 ~- [<!--[if lte ie 6]>
) [7 v/ a: @2 I! W* y7 U( m</td></tr></table>
</a>
<![endif]-->
4 n$ J* j+ ?% j1 ^/ B/ L$ J</li>
<li><a class=hide href=index.html>menus</a>
' c" l& r& ~- g+ D6 F3 Y2 j1 t8 [<!--[if lte ie 6]>
<a href=index.html>menus
+ L5 i7 f5 K; l" S0 i$ g6 j. _<table><tr><td>
, A" z5 T9 u+ }9 y( b# s: h* l<![endif]-->
# s$ M6 F" V$ q+ \8 g" g<ul>
<li><a href=spies.html title=a coded list of spies>spies menu</a></li>
- J2 l0 `; d2 K<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>
% f! X- m7 n' J1 V4 H4 r1 X# r, v' T<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>
. s1 _7 d5 W3 F<li><a href=jigsaw.html title=jigsaw links>jigsaw links</a></li>
<li><a href=circles.html title=circular links>circular links</a></li>
4 e- J+ G% g5 a& @- L! a</ul>
* r  b$ _1 Q7 ]$ d, Z<!--[if lte ie 6]>
  ]( E/ \' J4 m" Q</td></tr></table>
</a>
<![endif]-->
' q+ W/ J, B9 o2 k. Y) i. U</li>
- ~" X6 E3 o9 T5 w% e# k+ U2 p<li><a class=hide href=../layouts/index.html>layouts</a>
<!--[if lte ie 6]>
) h' z  n% T3 R: N  @  s. w<a href=../layouts/index.html>layouts
<table><tr><td>
<![endif]-->
0 J  N5 _4 y  @, x. f3 f! @8 w<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>
& `% y) [% W5 B% n5 g$ f<li><a href=../layouts/body4.html title=cross browser fixed layout>fixed 3</a></li>
3 i, q1 i* j9 N8 K- k: r; f<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>
3 |0 O* \. n! L$ x$ a: o$ w</ul>
<!--[if lte ie 6]>
& h( |# m8 u+ P$ i  v</td></tr></table>
</a>
<![endif]-->
</li>
; ?4 ^$ N) U! {# |7 a<li><a class=hide href=../boxes/index.html>boxes</a>
1 o! z0 f% [1 Q# b<!--[if lte ie 6]>
3 I8 y2 _4 B" v! [! e( I9 w2 [<a href=../boxes/index.html>boxes
<table><tr><td>
/ \9 x  T9 }" m2 n% T, d' @# h<![endif]-->
<ul>
<li><a href=spies.html title=a coded list of spies>spies menu</a></li>
1 F+ }- i' ~1 D. ^" ^# ]& l' n<li><a href=vertical.html title=a horizontal vertical menu>vertical menu</a></li>
& J# Q8 n0 v/ n' S! G<li><a href=expand.html title=an enlarging unordered list>enlarging list</a></li>
4 {. U( @& l. Z, Y( y<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>
, J# P* n5 C+ }$ x0 g</ul>
<!--[if lte ie 6]>
</td></tr></table>
0 b8 p' m: \  d; R) f+ ~</a>
<![endif]-->
</li>
( O& T4 M9 }( |7 }$ j<li><a class=hide href=../mozilla/index.html>mozilla</a>
  A8 F- s  x4 h& W6 ~/ Q, a<!--[if lte ie 6]>
/ j: ]( K* T% I2 S, u5 {  |<a href=../mozilla/index.html>mozilla
0 q/ _. t: q, F  L* g8 ?<table><tr><td>
: k; |1 M3 _3 y9 }" e<![endif]-->
+ P% z, O5 w- D& t1 X% U<ul>
( P% H. c0 v4 |<li><a href=../mozilla/dropdown.html title=a drop down menu>drop down menu</a></li>
7 J. f3 o- U( r2 @. y<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>
8 |: T  |4 {6 z: @8 P, u, j% v<li><a href=../mozilla/rainbow.html title=i can build a rainbow>rainbow box</a></li>
0 i  X' Q* s- v3 G% y6 a<li><a href=../mozilla/snooker.html title=snooker cue>snooker cue</a></li>
' Y5 A  v9 w+ c, i% O- Q. _5 b<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>
/ e  m6 w- ?! ]$ e. A; ?/ i8 ?3 J<li><a href=../mozilla/shadow_text.html title=shadow text>shadow text</a></li>
7 c: H% [' @) k) L# e  E* o</ul>
<!--[if lte ie 6]>
</td></tr></table>
</a>
' b/ l6 \9 |( K# s/ x# P5 K  n<![endif]-->
</li>
<li><a class=hide href=../ie/index.html>explorer</a>
<!--[if lte ie 6]>
; z' F8 c! J1 s+ b: P% j<a href=../ie/index.html>explorer
<table><tr><td>
7 d6 [& n# x$ ~: t% Y<![endif]-->
<ul>
4 a8 x) O6 D: L<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>
! q' W1 o3 O3 ?/ V+ k2 j<li><a href=../ie/exampletwo.html title=vertical align>vertical align</a></li>
</ul>
0 g# b9 S' \! d. C<!--[if lte ie 6]>
</td></tr></table>
9 Q, r8 F8 n, {5 _& I</a>
<![endif]-->
</li>
<li><a class=hide href=../opacity/index.html>opacity</a>
<!--[if lte ie 6]>
0 X0 ]  }; @( G9 h+ E' t* n<a href=../opacity/index.html>opacity
- r3 R: m0 ~9 \) x1 K7 I<table><tr><td>
<![endif]-->
! W: h# k/ O; U9 S6 g6 p<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>
9 w5 D( e5 u. M+ l<!--[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]-->
$ B1 F. y# X8 h<ul class=left>
6 L# w0 [9 J% J$ J) W+ ~<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>
, {1 _: A3 D% X3 D<li><a href=../menu/hover_click.html title=hover/click with no active/focus borders>hover/click</a></li>
/ u2 d  \1 f- C  i$ ]</ul>
; o2 u% [  ], n& N( `<!--[if lte ie 6]>
0 K+ s5 K, D9 S* l: }3 V</td></tr></table>
</a>
2 J+ Q; `( c8 J+ Q<![endif]-->
</li>
</ul>
<!--[if lte ie 6]>
</td></tr></table>
% z7 i) y6 _: |6 l0 {</a>
<![endif]-->
! R- [5 |% u4 b3 y! [6 o+ V  U</li>
</ul>
! n+ B( c1 z8 l$ P( Y- ?</div>
; K2 p. e$ J* T: J* V; I) \" s</body>
</html>

; L# Z1 B/ z& Z8 Z更多网页制作信息请查看： 网页制作

如本人留言违反国家有关法律，请网络管理员及时删除本人跟贴。本回贴不暗示、鼓励、支持或映射读者作出生活方式、工作态度、婚姻交友、子女教育的积极或消极判断。

俺灌的不是水，是寂寞啊！

呵呵　那是啊～～

哈哈 瞧你说的~~~

不错的东西 持续关注

哦...这个...偶昨天就看了....

正好你开咯这样的帖

要相信自己~智商为0

老天不公啊.....

宁愿选择放弃，不要放弃选择。