css二级导航菜单效果

<div
class="demo-container"><br
/><br
/><style type="text/css">#nav{margin:20px
0 80px 0}#nav{float:left;width:650px;height:auto;background:#fff url(/wp-content/uploads/examples/sliding-doors-with-a-drop-line/bottom_line.gif) repeat-x bottom;position:relative}#nav .select, #nav
.current{margin:0;padding:0;list-style:none;display:block}#nav
li{display:inline;margin:0;padding:0;height:auto}#nav .select a,
#nav .current
a{display:block;height:21px;float:left;background:url(/wp-content/uploads/examples/sliding-doors-with-a-drop-line/left_blue.gif) no-repeat left top;padding:0
0 0 3px;border-bottom:1px solid #000;text-decoration:none;font-size:10px;line-height:20px;white-space:nowrap;margin-left:2px}* html #nav .select a, * html #nav .current
a{width:1px}#nav .select a b,
#nav .current a
b{height:100%;display:block;background:url(/wp-content/uploads/examples/sliding-doors-with-a-drop-line/right_blue.gif) no-repeat right top;padding:0
6px 0 3px;color:#000}#nav .select a:hover,
#nav .select li:hover
a{background-position:0 -75px;border-color:#046;cursor:pointer}#nav .select a:hover b,
#nav .select li:hover a
b{background-position:100% -75px;border-color:#046;color:#fff}#nav
.sub{display:none}#nav
table{position:absolute;border-collapse:collapse;left:0;top:0;font-size:11px}#nav .current
a{background-position:0 -75px;border-color:#046}#nav .current a
b{background-position:100% -75px;color:#ff6}#nav .sub li a:hover,
#nav .select a:hover .sub li a:hover,
#nav .select li:hover .sub li a:hover{background:#005984 url(/wp-content/uploads/examples/sliding-doors-with-a-drop-line/sub_sep.gif) top right no-repeat;color:#fff;text-decoration:underline}#nav .sub_active .current_sub a,
#nav .sub_active a:hover{background:#005984 url(/wp-content/uploads/examples/sliding-doors-with-a-drop-line/sub_sep.gif) top right no-repeat;color:#ff6;text-decoration:underline}#nav .select li a:hover .sub,
#nav .select li:hover
.sub{display:block;position:absolute;width:650px;top:21px;left:0;background:#005984;margin-top:1px;padding:0;z-index:100;border-bottom:20px solid #fff}#nav .sub, #nav
.sub_active{margin:0;padding:0;list-style:none}#nav
.sub_active{display:block;position:absolute;width:650px;top:21px;left:0;background:#005984;margin-top:1px;padding:0;z-index:10;color:#000;border-bottom:20px solid #fff}* html #nav .sub_active, * html #nav .select a:hover
.sub{z-index:-1;margin-top:0;margin-top:1px}#nav .sub_active
a{height:25px;float:left;text-decoration:none;line-height:24px;white-space:nowrap;font-weight:normal}#nav .sub_active a,
#nav .select a:hover .sub li a,
#nav .select li:hover .sub li
a{display:inline;background:#005984 url(/wp-content/uploads/examples/sliding-doors-with-a-drop-line/sub_sep.gif) top right no-repeat;padding:0
10px;margin:0;font-size:10px;width:auto;white-space:nowrap;font-weight:normal;border:0;color:#fff;height:25px;line-height:24px}</style><div
id="nav"><ul
class="select"><li><a
href="#"><b>January</b> <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul
class="sub"><li><a
href="#">Fish</a></li><li><a
href="#">Chips</a></li><li><a
href="#">Bacon</a></li><li><a
href="#">Eggs</a></li><li><a
href="#">Tomato</a></li></ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul><ul
class="select"><li><a
href="#"><b>February</b> <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul
class="sub"><li><a
href="#">Sausages</a></li><li><a
href="#">Fried Bread</a></li><li><a
href="#">Fillet steak</a></li><li><a
href="#">Mushrooms</a></li></ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul><ul
class="select"><li><a
href="#"><b>March</b> <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul
class="sub"><li><a
href="#">Lager</a></li><li><a
href="#">Beer</a></li><li><a
href="#">Red wine</a></li><li><a
href="#">Crisps</a></li><li><a
href="#">Brandy</a></li></ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul><ul
class="select"><li><a
href="#"><b>April</b> <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul
class="sub"><li><a
href="#">Tea</a></li><li><a
href="#">Coffee</a></li><li><a
href="#">Milk</a></li><li><a
href="#">Squash</a></li><li><a
href="#">Lemonade</a></li></ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul><ul
class="current"><li><a
href="#"><b>May</b> </a></li></ul><ul
class="sub_active"><li><a
href="#">Crab</a></li><li><a
href="#">Shrimps</a></li><li><a
href="#">Lobster</a></li><li
class="current_sub"><a
href="#">Prawns</a></li><li><a
href="#">Salmon</a></li></ul><ul
class="select"><li><a
href="#"><b>June</b> <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul
class="sub"><li><a
href="#">Jam</a></li><li><a
href="#">Lemon Curd</a></li><li><a
href="#">Marmalade</a></li><li><a
href="#">Marmite</a></li><li><a
href="#">Bovril</a></li></ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul><ul
class="select"><li><a
href="#"><b>July</b> <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul
class="sub"><li><a
href="#">Lamb</a></li><li><a
href="#">Chicken</a></li><li><a
href="#">Pork</a></li><li><a
href="#">Beef</a></li><li><a
href="#">Cheese</a></li></ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul><ul
class="select"><li><a
href="#"><b>August</b> <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul
class="sub"><li><a
href="#">Beach</a></li><li><a
href="#">Country walk</a></li><li><a
href="#">Photography</a></li><li><a
href="#">Window shopping</a></li><li><a
href="#">Gardening</a></li></ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul><ul
class="select"><li><a
href="#"><b>September</b> <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul
class="sub"><li><a
href="#">Tulips</a></li><li><a
href="#">Sunflower</a></li><li><a
href="#">Cyclamen</a></li><li><a
href="#">Dahlia</a></li><li><a
href="#">Gladiolus</a></li></ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul><ul
class="select"><li><a
href="#"><b>October</b> <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul
class="sub"><li><a
href="http://www.hzhuti.com">好主题</a></li><li><a
href="#">Saucer</a></li><li><a
href="#">Plate</a></li><li><a
href="#">Fruit bowl</a></li><li><a
href="#">Egg cup</a></li></ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul></div><br
class="clear" /><br
/></div></td>
 </tr>
</table>