CSS技術要點
位置：
一級菜單中當導航欄是橫向導航，設置li的float爲left；二級菜單中縱向導航，設置li的float爲none(不能設置clear:both)
以及菜單中的li標籤position設置爲relative，二級菜單中的ul的position屬性設置爲absolute，top爲一級菜單的高度，left爲0
在a標籤中：
1. a標籤的display屬性要設置爲block
2. 寬和高：高度在最頂層ul中設置；寬度設置爲自適應，用padding: 0 10px實現
3. 要讓a標籤的文字上下居中，將a的line-height的值設置爲頂層ul標籤中的height的值；因爲是寬度自適應，所以左右居中不用設置
4. 其他所有視覺效果的實現，均在a標籤中產生，如background-color, text-decoration, color等屬性
HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="CSS/1.css">
<script src="index.js"></script>
</head>
<body>
<div id="nav">
<ul class="first-nav">
<li><a href="javascript:;" >home</a>
<ul class="second-nav home">
<li><a href="javascript:;">JAVAJAVASCRIT</a></li>
<li><a href="javascript:;">JQuery</a></li>
</ul>
</li>
<li><a href="javascript:;" >kecheng</a>
<ul class="second-nav kecheng">
<li><a href="javascript:;">JAVAJAVASCRIT</a></li>
<li><a href="javascript:;">JQuery</a></li>
</ul>
</li>
<li><a href="javascript:;" >learn</a>
<ul class="second-nav learn">
<li><a href="javascript:;">JAVAJAVASCRIT</a></li>
<li><a href="javascript:;">JQuery</a></li>
</ul>
</li>
<li><a href="javascript:;" >hhhh</a>
<ul class="second-nav hhhh">
<li><a href="javascript:;">JAVAJAVASCRIT</a></li>
<li><a href="javascript:;">JQuery</a></li>
</ul>
</li>
<li><a href="javascript:;" >aboutus</a>
<ul class="second-nav aboutus">
<li><a href="javascript:;">JAVAJAVASCRIT</a></li>
<li><a href="javascript:;">JQuery</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>CSS（SASS實現）已用CSS reset除去默認設置
ul.first-nav {
width: 500px;
height:40px;
margin:0 auto;
li{
float:left;
position: relative;
a{
background-color: #eee;
display: block;
padding: 0 10px;
text-decoration: none;
color:black;
line-height: 40px;
text-align: center;
}
a:hover{
background-color: black;
color: white;
}
ul.second-nav{
position: absolute;
top: 40px;
left: 0;
display: none;
li{
float: none;
margin-top: 2px;
a:hover{
background-color:blue;
};
}
}
}
li:hover{
ul.second-nav{
display: block;
}
}
}