-第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 。

巴特西

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

中英文的自动换行问题

ie7中的a元素的宽高兼容问题

完整代码

原理

留下的问题

最新文章

热门文章