div 竖向三级弹出菜单

<! 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 &gt; 
   <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 >