<!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,如果有需要,可以查詢本博客另一篇文章
純css實現二級下拉菜單
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.