横/纵向二级导航菜单

<!--[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 class="subNav">
		<li><a href="#">Starters</a></li>
		<li><a href="#">Main Courses</a></li>
		<li><a href="#">Desserts</a></li>
	</ul>
	</li>
	<li>
	<a href="#">Contact Us</a>
		<ul class="subNav">
		<li><a href="#">Starters</a></li>
		<li><a href="#">Main Courses</a></li>
		<li><a href="#">Desserts</a></li>
	</ul>
	</li>
	<li><a href="#">Articles</a></li>
	<li><a href="#">Buy Online</a></li>
</ul>
<div style="clear:both;"></div>
</div>

<div style="height:200px;"></div>
<hr solid/>

<div id="navigation">
<ul>
	<li><a href="#">Recipes</a>
	<ul class="subNav">
		<li><a href="#">Starters</a></li>
		<li><a href="#">Main Courses</a></li>
		<li><a href="#">Desserts</a></li>
	</ul>
	</li>
	<li><a href="#">Contact Us</a>
		<ul class="subNav">
		<li><a href="#">Starters</a></li>
		<li><a href="#">Main Courses</a></li>
		<li><a href="#">Desserts</a></li>
	</ul>
	</li>
	<li><a href="#">Articles</a></li>
	<li><a href="#">Buy Online</a></li>
</ul>
</div>
</body>

#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')
    }
}



横/纵向二级导航菜单_第1张图片

你可能感兴趣的:(html,css,IE)