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