純css實現二級下拉菜單

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<head>
		<style type="text/css"> 
		ul {
			  position: relative;
		      list-style:none;
  			  margin: 0px;
  			  padding: 0px;
			}
		ul li {	
			display: inline;
			float: left;
		 	width:100px;
		 	height:30px;
			}
	 	ul li li {  height:25px;}
		ul li a{display: block;}
		ul li ul{ display:none; }
		ul li:hover ul {display: block;}
 	</style>
		</head>
<body>
		<div id="container">
		<div id="nav">
			<ul>
  <li><a href="#">父菜單一</a></li>
  <li><a href="#">父菜單二</a>
    <ul>
      <li><a href="#">子菜單一</a></li><li><a href="#">子菜單二</a></li><li><a href="#">子菜單三</a></li>
    </ul>
  </li>
  <li><a href="#">父菜單三</a></li>
  <li><a href="#">父菜單四</a>
    <ul>
      <li><a href="#">子菜單一</a></li>
      <li><a href="#">子菜單二</a></li>
      <li><a href="#">子菜單三</a></li>
    </ul>
  </li>
  <li><a href="#">菜單五</a></li>
</ul>
		</div>
		  <br/>
		 <br/>
		 <br/>
		 <div class="clear"></div>
		 <div id="main"  >Hello World!!!!!!!!!!!!!!!</div>
	</div>
</body>
注意此方法不適用於IE6,如果有需要,可以查詢本博客另一篇文章

Jquery+CSS完美實現二級下拉菜單(兼容所有瀏覽器)




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章