横/纵向二级导航菜单
<!--[if ie 6]><style>#navigation ul li { float: left; height: 1%; }#navigation ul li a { height: 1%; }#topNav ul li { float: left; height: 1%; }#topNav ul li a { height: 1%; }</style><![endif]--><body onload="init();"><div id="topNav"><ul><li><a href="#">Recipes</a><ul name="code">#navigation {width: 200px;}#navigation ul {list-style: none;margin: 0;padding: 0;}#navigation li {position:relative;border-bottom: 1px solid #ED9F9F;}#navigation li a:link,#navigation li a:visited {font-size: 90%;display: block;padding: 0.4em 0 0.4em 0.5em;border-left: 12px solid #711515;border-right: 1px solid #711515;background-color: #B51032;color: #FFFFFF;text-decoration: none;}#navigation li a:hover {background-color: #711515;color: #FFFFFF;}#navigation ul ul {/*margin-left: 12px;*/}#navigation ul ul li {border-bottom: 1px solid #711515;margin: 0;width:180px;}#navigation ul ul a:link,#navigation ul ul a:visited {background-color: #ED9F9F;color: #711515;}#navigation ul ul a:hover {background-color: #711515;color: #FFFFFF;}#navigation li ul a:link,#navigation li ul a:visited {border-left: none;/*12px solid #711515;*/}#navigation li ul { position: absolute; left: 200px; /* Set 1px less than menu width */ top: 0; display:none; }/*------------------------------*/#topNav ul, li{display:block;list-style: none;margin: 0;padding: 0;}#topNav ul li{width:180px;float: left;position:relative;border-right: 1px solid #ED9F9F;text-align:center;}#topNav li a:link,#topNav li a:visited {font-size: 90%;display: block;padding-bottom: 0.4em;border-top: 8px solid #711515;background-color: #B51032;color: #FFFFFF;text-decoration: none;}#topNav ul ul a:link,#topNav ul ul a:visited {border-top:none;border-left:10px solid #711515;padding-top:0.4em;background-color:#ED9F9F;border-bottom: 1px solid #711515;color:#711515;}#topNav ul ul a:hover,#topNav ul li a:hover {background-color: #711515;color: #FFFFFF;}#topNav li ul { position: absolute; top: 29px; left: 0px; display:none;}function init(){ $('#navigation ul li').bind('mouseover',{},doMouseOver); $('#navigation ul li').bind('mouseout',{},doMouseOut); $('#topNav ul li').bind('mouseover',{},doMouseOver); $('#topNav ul li').bind('mouseout',{},doMouseOut); }function doMouseOver(event){ var ulEl = $(this); var subNav = ulEl.children('.subNav'); if(subNav){ $(subNav).css('display','block'); }}function doMouseOut(event){ var ulEl = $(this); var subNav = ulEl.children('.subNav'); if(subNav){ $(subNav).css('display','none') }}