纯DIV+CSS制作的三级鼠标经过弹出下拉导航菜单源码

<! 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 > 三级dropdown弹出菜单 </ title >
< style type ="text/css" >
/* common styling */
.menu {font-family: arial, sans-serif; width:750px; 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 #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;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; 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:#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;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}
</ 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:21px; left:0; 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:#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;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}
</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 >
< 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">&lt; HOVER/CLICK
<table><tr><td>
<![endif] -->
< ul class ="left" >
< 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 >
</ ul >
<!-- [if lte IE 6]>
</td></tr></table>
</a>
<![endif] -->
</ li >
</ ul >
</ div >
</ body >
</ html >

转载于:https://www.cnblogs.com/lancee/archive/2011/07/07/2100258.html