中英文的自动换行问题

把下面代码中的 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 。

-第1章 HTMLCSS方法实现下拉菜单的更多相关文章

  1. -第2章 JS方法实现下拉菜单显示和隐藏

    知识点 onmouseover 鼠标经过 onmouseout 鼠标移出 function 关键字 getElementsByTagName 获取一组标签 length 获取对象成员个数 思路 给一级 ...

  2. -第3章 jQuery方法实现下拉菜单显示和隐藏

    知识点 jquery 的引入方式 本地下载引入 在线引入 children 只获取子元素,不获取孙元素 show() 显示. hide() 隐藏. 完整代码 <!-- Author: XiaoW ...

  3. HTML/CSS方法实现下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现）

    HTML/CSS方法实现下拉菜单来源:慕课网<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  5. Bootstrap-Plugin：下拉菜单（Dropdown）插件

    ylbtech-Bootstrap-Plugin:下拉菜单(Dropdown)插件 1.返回顶部 1. Bootstrap 下拉菜单(Dropdown)插件 Bootstrap 下拉菜单 这一章讲解了 ...

  6. SJPullDownMenu下拉菜单框架使用

    SJPullDownMenu 快速集成类似淘宝筛选下拉菜单 如果页面显示不全等问题请转至:http://www.jianshu.com/p/d07c6393830c 查看使用 Getting Star ...

  7. DeDeCMS中如何实现下拉菜单

    在5.7版本,已经有比较简单的方法实现下拉菜单,我们可以用它已有方法,也可以用我写的第二种方法来实现 1. 在需要下拉菜单的地方加入以下代码 <div id="navMenu" ...

  8. Bootstrap下拉菜单

    前面的话 网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...

  9. 『心善渊』Selenium3.0基础 — 13、Selenium操作下拉菜单

    目录 1.使用Selenium中的Select类来处理下拉菜单(推荐) 2.下拉菜单对象的其他操作(了解) 3.通过元素二次定位方式操作下拉菜单(重点) (1)了解元素二次定位 (2)示例: 页面中的 ...

随机推荐

  1. python pymssql 连接数据库

    1)写在前面 远程连接数据库的时候,端口前面都是用的逗号, 因为惯性思维, 就傻傻的把    ip+,+端口 赋值给server了,然后一直报错, pymssql.InterfaceError: Co ...

  2. IO多路复用 IO异步

    一.概念说明 同步IO和异步IO,阻塞IO和非阻塞IO分别是什么,到底有什么区别?不同的人在不同的环境给出的答案是不同的.所以先限定一下本文的环境.本文讨论的背景是Linux环境下的network I ...

  3. JDK8 元空间

    1. 运行时常量池和静态变量都存储到了堆中,MetaSpace存储类的元数据,MetaSpace直接申请在本地内存中(Native memory),这样类的元数据分配只受本地内存大小的限制,OOM问题 ...

  4. antd-design model 数据特点

  5. .pages怎么在windows上打开？Windows下打开在Mac中编辑的.pages文件方法

    .pages怎么在windows上打开?Windows下打开在Mac中编辑的.pages文件方法 1.最简单的方法是修改后缀名为.zip然后解压,解压后就可以看到一张图片,这个就是文档内容了. 2.更 ...

  6. PyCharm 2017.2.3 版本在2017年9月7日发布，支持 Docker Compose

    PyCharm是由JetBrains打造的一款Python IDE.PyCharm具备用于一般IDE的功能,比如, 调试.语法高亮.Project管理.代码跳转.智能提示.自动完成.单元测试.版本控制 ...

  7. linux python虚拟环境 相关的

    为什么要用虚拟环境 在使用python开发过程中,各种业务需求多了,导致工程任务多了,难免会碰到不同的工程依赖不同版本库的问题,;或者是在开发的时候不想让物理环境里充斥各种各样的库,引发依赖环境灾难, ...

  8. HDU 2175 汉诺塔IX （递推）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2175 1,2,...,n表示n个盘子．数字大盘子就大．n个盘子放在第1根柱子上．大盘不能放在小盘上．  ...

  9. zabbix agent配置详解（windows）

    客户端操作  标注:监控zabbix_agentd客户端安装对象是win server 2008操作系统 64位. 1.  下载zabbix_agentd监控客户端软件安装包(windows操作系统客 ...

  10. MD5加密算法Java代码实现

    package com.app.utils; import java.math.BigInteger; import java.security.MessageDigest; import java. ...