div+css制作的一个非常好看的导航分享，导航效果图如下：

下面是代码直接复制就行了：

<style type="text/css"> /* common styling */ /* set up the overall width of the menu div, the font and the margins */ .menu { font-family: arial, sans-serif; width:750px; margin:0; margin:50px 0; } /* remove the bullets and set the margin and padding to zero for the unordered list */ .menu ul { padding:0; margin:0; list-style-type: none; } /* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */ .menu ul li { float:left; position:relative; } /* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */ .menu ul li a, .menu ul li a:visited { display:block; text-align:center; text-decoration:none; width:104px; height:30px; color:#000; border:1px solid #fff; border-width:1px 1px 0 0; background:#c9c9a7; line-height:30px; font-size:11px; } /* make the dropdown ul invisible */ .menu ul li ul { display: none; } /* specific to non IE browsers */ /* set the background and foreground color of the main menu li on hover */ .menu ul li:hover a { color:#fff; background:#b3ab79; } /* make the sub menu ul visible and position it beneath the main menu list item */ .menu ul li:hover ul { display:block; position:absolute; top:31px; left:0; width:105px; } /* style the background and foreground color of the submenu links */ .menu ul li:hover ul li a { display:block; background:#faeec7; color:#000; } /* style the background and forground colors of the links on hover */ .menu ul li:hover ul li a:hover { background:#dfc184; color:#000; } </style> <div class="menu"> <ul> <li> <a class="hide" href="../menu/index.html">DEMOS</a> <ul> <li> <a title="The zero dollar ads page" href="../menu/zero_dollars.html">zero dollars</a> </li> <li> <a title="Wrapping text around images" href="../menu/embed.html">wrapping text</a> </li> <li> <a title="Styling forms" href="../menu/form.html">styled form</a> </li> <li> <a title="Removing active/focus borders" href="../menu/nodots.html">active focus</a> </li> <li> <a title="Multi-position drop shadow" href="../menu/shadow_boxing.html">shadow boxing</a> </li> <li> <a title="Image Map for detailed information" href="../menu/old_master.html">image map</a> </li> <li> <a title="fun with background images" href="../menu/bodies.html">fun backgrounds</a> </li> <li> <a title="fade-out scrolling" href="../menu/fade_scroll.html">fade scrolling</a> </li> <li> <a title="em size images compared" href="../menu/em_images.html">em sized images</a> </li> </ul> </li> <li> <a class="hide" href="index.html">MENUS</a> <ul> <li> <a title="a coded list of spies" href="spies.html">spies menu</a> </li> <li> <a title="a horizontal vertical menu" href="vertical.html">vertical menu</a> </li> <li> <a title="an enlarging unordered list" href="expand.html">enlarging list</a> </li> <li> <a title="an unordered list with link images" href="enlarge.html">link images</a> </li> <li> <a title="non-rectangular links" href="cross.html">non-rectangular</a> </li> <li> <a title="jigsaw links" href="jigsaw.html">jigsaw links</a> </li> <li> <a title="circular links" href="circles.html">circular links</a> </li> </ul> </li> <li> <a class="hide" href="../layouts/index.html">LAYOUTS</a> <ul> <li> <a title="Cross browser fixed layout" href="../layouts/bodyfix.html">Fixed 1</a> </li> <li> <a title="Cross browser fixed layout" href="../layouts/body2.html">Fixed 2</a> </li> <li> <a title="Cross browser fixed layout" href="../layouts/body4.html">Fixed 3</a> </li> <li> <a title="Cross browser fixed layout" href="../layouts/body5.html">Fixed 4</a> </li> <li> <a title="A simple minimum width layout" href="../layouts/minimum.html">minimum width</a> </li> </ul> </li> <li> <a class="hide" href="../boxes/index.html">BOXES</a> <ul> <li> <a title="a coded list of spies" href="spies.html">spies menu</a> </li> <li> <a title="a horizontal vertical menu" href="vertical.html">vertical menu</a> </li> <li> <a title="an enlarging unordered list" href="expand.html">enlarging list</a> </li> <li> <a title="an unordered list with link images" href="enlarge.html">link images</a> </li> <li> <a title="non-rectangular links" href="cross.html">non-rectangular</a> </li> <li> <a title="jigsaw links" href="jigsaw.html">jigsaw links</a> </li> <li> <a title="circular links" href="circles.html">circular links</a> </li> </ul> </li> <li> <a class="hide" href="../mozilla/index.html">MOZILLA</a> <ul> <li> <a title="A drop down menu" href="../mozilla/dropdown.html">drop down menu</a> </li> <li> <a title="A cascading menu" href="../mozilla/cascade.html">cascading menu</a> </li> <li> <a title="Using content:" href="../mozilla/content.html">content:</a> </li> <li> <a title=":hover applied to a div" href="../mozilla/moxbox.html">mozzie box</a> </li> <li> <a title="I can build a rainbow" href="../mozilla/rainbow.html">rainbow box</a> </li> <li> <a title="Snooker cue" href="../mozilla/snooker.html">snooker cue</a> </li> <li> <a title="Target Practise" href="../mozilla/target.html">target practise</a> </li> <li> <a title="Two tone headings" href="../mozilla/splittext.html">two tone headings</a> </li> <li> <a title="Shadow text" href="../mozilla/shadow_text.html">shadow text</a> </li> </ul> </li> <li> <a class="hide" href="../ie/index.html">EXPLORER</a> <ul> <li> <a title="Example one" href="../ie/exampleone.html">example one</a> </li> <li> <a title="Weft fonts" href="../ie/weft.html">weft fonts</a> </li> <li> <a title="Vertical align" href="../ie/exampletwo.html">vertical align</a> </li> </ul> </li> <li> <a class="hide" href="../opacity/index.html">OPACITY</a> <ul> <li> <a title="colour wheel" href="../opacity/colours.html">opaque colours</a> </li> <li> <a title="a menu using opacity" href="../opacity/picturemenu.html">opaque menu</a> </li> <li> <a title="partial opacity" href="../opacity/png.html">partial opacity</a> </li> <li> <a title="partial opacity II" href="../opacity/png2.html">partial opacity II</a> </li> </ul> </li> </ul> <!-- clear the floats if required --> <div class="clear"> </div> </div>