中英文的自动换行问题

把下面代码中的 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. jsp页面报错 javax.servlet cannot be resolved to a type

    需要引入 Tomcat 中的两个 jar 包: servlet-api jsp-api.jar

  2. 通过百度api 获取当前城市3种方法

    方法一:function showLocation(data) { console.log(data.content); //alert(data.content.address_detail.cit ...

  3. selenium-java web自动化测试工具抓取百度搜索结果实例

    selenium-java web自动化测试工具抓取百度搜索结果实例 这种方式抓百度的搜索关键字结果非常容易抓长尾关键词,根据热门关键词去抓更多内容可以用抓google,百度的这种内容容易给屏蔽,用这 ...

  4. Different between MB SD Connect Compact 5 and MB SD C4 Star Diagnostic Tool

    MB SD C4 Star Diagnostic Tool is the professional MB Star Diagnostic Tools for benz cars and trucks. ...

  5. java操作linux 提交spark jar

    maven依赖 <!--Java ssh-2 --><dependency> <groupId>ch.ethz.ganymed</groupId> &l ...

  6. flask框架----基于flask的扩展实现的简单的页面登录

    废话不多说,直接上代码 from flask import Flask,render_template,request,redirect,session app = Flask(__name__,te ...

  7. asyncio queue

    from asyncio import Queue,sleep import asyncio from threading import Thread import time qu=Queue() # ...

  8. 2、pandas的value_counts()和describe()

    一.value_counts pandas 的value_counts()函数可以对Series里面的每个值进行计数并且排序. value_counts是计数,统计所有非零元素的个数,默认以降序的方式 ...

  9. vue.js not detected 解决办法-vue.js devtools 安装

    国外网站:https://www.crx4chrome.com/ 国内网站:http://www.cnplugins.com/ http://chromecj.com/web-development/ ...

  10. 动态规划之115 Distinct Subsequences

    题目链接:https://leetcode-cn.com/problems/distinct-subsequences/description/ 参考链接:https://www.cnblogs.co ...