只用css 实现下拉导航栏

昔人已老 2012-12-02

主要用的知识是css中的hover伪类,当鼠标放停在父导航栏上的li元素时候,我们就修改子菜单下面的ul的display属性,这样就可以实现hover的效果了。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Drop Down Navigation with CSS Only</title>
<style>
	body, div, ul, li { margin: 0; padding: 0; } 
	#header { 
		min-width: 800px; 
		height: 150px; 
	} 
  #nav {  
		width: 100%; 
		background-color: green; 
		float: left; 
	}
	#nav li { 
		list-style: none;
		float: left; 
		width: 120px; 
		height: 30px; 
		line-height: 30px; 
		text-align: center;
	} 
	#nav li a { 
		color: white; 
		text-decoration: none; 
 		display: block; 
	} 
	#nav li a:hover { 
		background-color: #066; 
	} 

	#nav li ul { 
		position: absolute;  
		display: none; 
	} 
	
	#nav li:hover ul { 
		display: block; 
	} 

		
	#nav li ul li { 
		float: none; 
		display: inline; 
	}
	#nav li ul li a { 
		width: 118px; 
		position: relative; 
		border-left: 1px solid black; 
		border-right: 1px solid black; 
		border-bottom: 1px solid black; 
		background: green; 
		color: #fff; 
	}
	#nav li ul li a:hover { 
		background: #066; 
		color: #000; 
	}

		
</style>
<!--[if lte IE 6]>
<style>  
body {behavior: url("csshover3.htc");}  
</style>  
<![endif]--> 
</head>

<body id="about">
  <div id="header">
    <ul id="nav">
      <li class="home"><a href="#">Home</a></li>
      <li class="tutorials"><a href="#">Tutorials</a>
        <ul>
          <li><a href="#">Sub Menu 1</a></li>
          <li><a href="#">Sub Menu 2</a></li>
          <li><a href="#">Sub Menu 3</a></li>
        </ul>
      </li>
    </ul><!-- nav --> 
  </div><!-- header -->     

</body>
</html>

相关推荐

aSuncat / 0评论 2020-08-18