-第1章 HTMLCSS方法实现下拉菜单
中英文的自动换行问题
把下面代码中的 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
。