中英文的自动换行问题

把下面代码中的 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. 使用Groovy+Spock轻松写出更简洁的单测

    当无法避免做一件事时,那就让它变得更简单. 概述 单测是规范的软件开发流程中的必不可少的环节之一.再伟大的程序员也难以避免自己不犯错,不写出有BUG的程序.单测就是用来检测BUG的.Java阵营中,J ...

  2. [转载]asp.net中，<%#%>,<%=%>和<%%>分别是什么意思，有什么区别

    在asp.net中经常出现包含这种形式<%%>的html代码,总的来说包含下面这样几种格式: 一. <%%> 这种格式实际上就是和asp的用法一样的,只是asp中里面是vbsc ...

  3. Porsche Piwis Tester 2 Online Coding Guide

    Porsche Piwis online programming account service is piwis porsche subscription and piwis tester 2 on ...

  4. 爬虫--cheerio

    const cheerio = require('cheerio') const $ = cheerio.load('<h2 class="title">Hello w ...

  5. APIClound 弹出层 Frame

    JS api.openFrame({ name: 'showPic', url: './showPic.html', rect: { // x: api.pageParam.marginBottom, ...

  6. vue style 的scoped 使用

    1 原理 vue 可以通过在 style标签添加scoped这个属性来控制 组件内的css作用域 <style scoped> @media (min-width: 250px) { .l ...

  7. 怎样从外网访问内网WampServer？

    本地安装了一个WampServer,只能在局域网内访问,怎样从外网也能访问到本地的WampServer呢?本文将介绍具体的实现步骤. 准备工作 安装并启动WampServer 默认安装的WampSer ...

  8. 作为phper既然了解共享内存函数shmop的使用方法，那么就必须要了解一下信号量是什么，以及信号量使用的代码案例

    在单独的一个PHP进程中读写.创建.删除共享内存方面上你应该没有问题了.但是实际运行中不可能只是一个PHP进程在运行中.如果在多个进程的情况下你还是沿用单个进程的处理方法,你一定会碰到问题--著名的并 ...

  9. spring boot log4j2与三方依赖库log4j冲突无法初始化问题解决方法

    因为从Spring Boot 1.4开始,spring boot就不支持log4j了,必须是log4j2或者logback,具体两者如何配置以及NDC的支持可以参考spring boot精华版. 这里 ...

  10. NLTK 知识整理

    NLTK 知识整理 nltk.corpus模块自带语料 NLTK comes with many corpora, toy grammars, trained models, etc. A compl ...