中英文的自動換行問題
把下面代碼中的 javascript 改成 子菜單1 試試， 如果英文的話寬度會自動撐開， 用中文不會， 而直接轉行下來。
<ul>
<li><a href="#">javascript</a></li>
<li><a href="#">子菜單2</a></li>
<li><a href="#">子菜單3</a></li>
</ul>
ie7中的a元素的寬高兼容問題
從上面的圖上不只是可以看出字轉行了。而且寬度也發生了變化。這個變化在旁邊的 chrome 瀏覽器中是沒有的，在右邊的ie7中可以看到。
給子菜單中a設置高度即可。但是高度是解決了，現在還有一個寬度也有問題，那么再設置寬度即可。
只設置了高度：
設置了寬高：
所以在ie7下要設置好寬高。
完整代碼
<!--
Author: XiaoWen
Create a file: 2017-02-27 11:24:01
Last modified: 2017-02-27 13:05:43
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#nav{
background: #eee;
width: 600px;
height: 40px;
margin: 0 auto;
}
ul{
list-style:none;
}
ul li{
float: left;
line-height: 40px;
text-align: center;
position: relative;
}
a{
text-decoration: none;
color: #000;
display: block;
padding: 0 10px;
height: 40px;
}
a:hover{
color: #fff;
background: #666;
}
ul li ul li{
float: none;
background: #eee;
margin-top: 2px;
}
ul li ul{
position: absolute;
left: 0;
top: 40px;
}
ul li ul li a{
width: 80px;
}
ul li ul li a:hover{
background: #06f;
}
ul li ul{
display: none;
}
ul li:hover ul{
display: block;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">一級菜單1</a></li>
<li><a href="#">一級菜單2</a></li>
<li>
<a href="#">菜單3</a>
<ul>
<li><a href="#">javascript</a></li>
<li><a href="#">子菜單2</a></li>
<li><a href="#">子菜單3</a></li>
</ul>
</li>
<li><a href="#">一級菜單3</a></li>
<li><a href="#">一級菜單4</a></li>
<li><a href="#">一級菜單5</a></li>
</ul>
</div>
</body>
</html>
原理
二級菜單，其實也就是給一級菜單中的其中一個里面再寫一個列表。這個列表本來是隱藏 display:none 的，當鼠標移動到一級菜單 li:hover 上時，才顯示這個列表。要二級菜單在子一級菜單的位置下，需要給一級菜單 li 設置相對定位。
留下的問題
- 中文字符自動換行的問題，這個只要加上寬度也就可以了。或者強制不換行。
- 上面說到給子a標簽添加
固定的寬度和高度可以避免ie7下面的兼容問題，我們設置了80px的寬度，但是，如果子菜單里面的內容我們不知道，文字個數很多，超過了80px呢？ - 上面是在 li 標簽上加的 hover 偽類事件，這個在 ie6 中是不可以的。 ie6 只運行 a 標簽的偽類事件，而且 a 標簽中最好不要包含塊類元素。
最后有沒有想說什么？做個菜單而已，明明可以很簡單， ie7 的寬高問題， ie6 的偽類問題，弄得復雜了起來。這還只是個菜單而已，想想整個網站上的所有頁面…… 如果要做好兼容性，復雜程度可想而知。
那么，為了我們的身心健康，為了向前發展的技術， 勇敢的對舊版本瀏覽器說 NO 。