提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

-第1章 HTMLCSS方法实现下拉菜单

方法 实现 下拉菜单
2023-09-11 14:17:02 时间

中英文的自动换行问题

把下面代码中的 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 设置相对定位。

留下的问题

  1. 中文字符自动换行的问题，这个只要加上宽度也就可以了。或者强制不换行。
  2. 上面说到给子a标签添加固定的宽度和高度可以避免ie7下面的兼容问题，我们设置了80px的宽度，但是，如果子菜单里面的内容我们不知道，文字个数很多，超过了80px呢？
  3. 上面是在 li 标签上加的 hover 伪类事件，这个在 ie6 中是不可以的。 ie6 只运行 a 标签的伪类事件，而且 a 标签中最好不要包含块类元素。

最后有没有想说什么？做个菜单而已，明明可以很简单， ie7 的宽高问题， ie6 的伪类问题，弄得复杂了起来。这还只是个菜单而已，想想整个网站上的所有页面…… 如果要做好兼容性，复杂程度可想而知。

那么，为了我们的身心健康，为了向前发展的技术， 勇敢的对旧版本浏览器说 NO 。

相关文章