最近在複習CSS,用CSS做的菜單顯示，後面再詳解。
<!DOCTYPE html />
<html>
<head>
<title>縱向菜單</title>
<style type="text/css">
*{margin:0;padding:0;}
/*製作橫向排列的菜單*/
#listmenu{width:100%;height:200px;background:#cc99ff;}
#listmenu nav{width:150px;margin-top:20px;background:#ffcccc;}
#nav_left ul{list-style-type:none;border:1px solid #cc00ff;border-radius:3px;padding:5px 10px 3px;}
#nav_left li{font-family:楷體;font-size:20px;padding:3px 5px;}
#nav_left li+li{border-top:1px solid #9900ff;}
#nav_left a{color:#660099;display:block;text-align:center;text-decoration:none;}
#nav_left a:hover{color:#006600;}
#nav_left a:active{color:#ff0000;background-color:#99ff66;}
#nav_left a:visited{color:#ffff33;}
/*製作橫向排列的菜單*/
#sidewards{margin-top:10px;background:#ff99ff;height:80px;}
#sidewards nav{margin-top:20px;}
#nav_top ul{overflow:hidden;}
#nav_top li{list-style-type:none;float:left;}
#nav_top li+li a{border-left:2px solid #ccff00;}
#nav_top a{font-family:楷體;font-size:20px;padding:0 15px;color:#000000;display:block;text-align:center;text-decoration:none;}
#nav_top a:hover{color:#006600;}
#nav_top a:active{color:#ff0000;background-color:#99ff66;}
#nav_top a:visited{color:#ffff33;}
/*製作下拉菜單*/
#pulldown{margin-top:10px;background:#ff99ff;height:300px;}
#pulldown nav{margin:20px;}
.nav_pull{height:200px;}
.nav_pull ul{list-style-type:none;float:left;}
.nav_pull ul li{float:left;position:relative;}
.nav_pull a{display:block;color:#555;background-color:#eee;padding:.2em 1em;border-width:3px;border-color:#ffccff;background-clip:padding-box;text-decoration:none;border-right-style:solid;}
.nav_pull ul li ul li{float:none;}
.nav_pull ul li ul{width:9em;left:0;top:100%;position:absolute;display:none;}
.nav_pull ul li ul li a{border-right-style:none;border-top-style:solid;}
.nav_pull ul li:hover ul{display:block;}
</style>
</style>
</head>
<body>
<div id="listmenu">&我是垂直菜單哦^_^
<nav id="nav_left">
<ul>
<li><a href="#">個人信息</a></li>
<li><a href="#">教育經歷</a></li>
<li><a href="#">家庭成員</a></li>
</ul>
</nav>
</div>
<div id="sidewards">&我是水平菜單哦^_^
<nav id="nav_top">
<ul>
<li><a href="#">個人信息</a></li>
<li><a href="#">教育經歷</a></li>
<li><a href="#">家庭成員</a></li>
</ul>
</nav>
</div>
<div id="pulldown">我是下拉菜單哦^_^
<nav class="nav_pull vertical">
<ul>
<li><a href="#">個人信息</a>
<ul id="two">
<li><a href="#">樑幸芝</a></li>
<li><a href="#">西安郵電大學</a>
</li>
<li><a href="#">計算機學院</a></li>
<li><a href="#">軟件1204</a></li>
</ul>
</li>
<li><a href="#">教育經歷</a>
<ul id="two">
<li><a href="#">北張小學</a></li>
<li><a href="http://xpfyyz.30edu.com/">丰儀一中</a></li>
<li><a href="http://baike.baidu.com/view/3990931.htm">南郊中學</a></li>
<li><a href="http://www.xiyou.edu.cn/">西安郵電大學</a></li>
</ul>
</li>
<li><a href="#">家庭成員</a>
<ul id="two">
<li><a href="#">樑爸爸</a></li>
<li><a href="#">樑媽媽</a></li>
<li><a href="#">我</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>