GitHub源碼地址：
https://github.com/wxygoing/firstTimeTest/blob/master/NavigationMenu
1、用無序列表創建菜單
2、*{padding:0px;margin: 0px;} 和 body{padding:0px;margin: 0px;}
*{padding:0px;margin: 0px;}： * 相當於選擇器，代表html所有的元素，包括html標籤、body標籤等； {}大括號裏面寫入需要給定的屬性和屬性值即可。 css中一開始寫入*{padding:0px;margin: 0px;}，表示初始化所有的標籤元素(具有盒子模型)的內外邊距均爲0px.
body{padding:0px;margin: 0px;}：body只是一個標籤，如果它的子標籤和該屬性均具有繼承性，纔會繼承這裏所設置的屬性；(比如：border、padding、margin屬性不具有繼承性；而color屬性具有繼承性等)
3、text-decoration: none; 去掉鏈接下劃線
4、display: block; 定義關鍵是將<a>標籤設置爲塊元素，這樣可以使用hover
5、line-height設置行間距離，
6、text-indent 規定文本塊中文本首行縮進的距離，不會影響總體寬度（padding會）。這裏不用padding-left: 10px;因爲這個使得塊width變成110，
7、list-style: none;無序列表圓點去除
8、float: left; 將垂直菜單變成水平菜單
給水平菜單添加整體背景，需要對height和width進行設置，因爲菜單<li>浮動後，<li>脫離了文檔流，導致<ul>將失去高度和寬度；如果需要對<ul>進行整體背景設置，首先要給定義寬，高
9、offsetWidth屬性 和width
a.offsetWidth屬性可以返回對象的padding+border+width屬性值之和，style.width返回值就是定義的width屬性值。
b.offsetWidth屬性僅是可讀屬性，而style.width是可讀寫的。
c.offsetWidth屬性返回值是整數，而style.width的返回值是字符串，並且帶有單位。
d.style.width僅能返回以style方式定義的內部樣式表的width屬性值。
10、clearInterval(this.time);//不做清除，動畫會累加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伸縮菜單,水平方向</title>
<style type="text/css">
/* 下劃線去除： a{text-decoration:none}
文本縮進標籤 text-indent 不會影響總體寬度（padding會）
需要將a標籤設置爲塊元素，才能設高寬、hover效果 代碼：a{display:block}
hover格式 a:hover{} */
*{margin: 0;padding: 0;font-size: 14px;}/* 初始化頁面設置*/
ul{list-style: none;height: 50px;padding-left: 30px; border-bottom: 5px solid #F60;}
/* list-style: none;無序列表圓點去除 */
li{float: left;margin-top: 20px;} /* //將垂直菜單變成水平菜單 */
a{text-decoration: none; display: block;height: 30px;line-height: 30px;width: 120px;background-color: #ccc;margin-bottom: 1px;text-align: center;}
/*line-height 屬性設置行間的距離（行高）。註釋：不允許使用負值。 用於文字上下居中*/
.on, a:hover{color: #fff; background-color: #f60;}
</style>
<script type="text/javascript">
/*1.offsetWidth屬性可以返回對象的padding+border+width屬性值之和，style.width返回值就是定義的width屬性值。
2.offsetWidth屬性僅是可讀屬性，而style.width是可讀寫的。
3.offsetWidth屬性返回值是整數，而style.width的返回值是字符串，並且帶有單位。
4.style.width僅能返回以style方式定義的內部樣式表的width屬性值。*/
window.onload = function() {
let aLable = document.getElementsByTagName('a');
for (let i = 0; i < aLable.length; i++) {
aLable[i].onmouseover = function() { // 這寫法不好
clearInterval(this.time); //不做清除，動畫會累加
let This = this; //把當前this傳進來
This.time = setInterval(function() {
This.style.width = This.offsetWidth + 8 + 'px';
if (This.offsetWidth >= 160) {
clearInterval(This.time);
}
}, 30);
}
aLable[i].onmouseout = function() {
clearInterval(this.time);//不做清除，動畫會累加
let This = this; //把當前this傳進來
This.time = setInterval(function() {
This.style.width = This.offsetWidth - 8 + 'px';
if (This.offsetWidth <= 120) {
This.style.width = '120px';
clearInterval(This.time);
}
}, 30);
}
}
}
</script>
</head>
<body>
<ul>
<li><a class="on" href="#">首 頁</a></li>
<li><a href="#">新聞快訊</a></li>
<li><a href="#">產品展示</a></li>
<li><a href="#">售後服務</a></li>
<li><a href="#">聯繫我們</a></li>
</ul>
</body>
</html>