-第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方法实现下拉菜单的更多相关文章
- -第2章 JS方法实现下拉菜单显示和隐藏
知识点 onmouseover 鼠标经过 onmouseout 鼠标移出 function 关键字 getElementsByTagName 获取一组标签 length 获取对象成员个数 思路 给一级 ...
- -第3章 jQuery方法实现下拉菜单显示和隐藏
知识点 jquery 的引入方式 本地下载引入 在线引入 children 只获取子元素,不获取孙元素 show() 显示. hide() 隐藏. 完整代码 <!-- Author: XiaoW ...
- HTML/CSS方法实现下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现）
HTML/CSS方法实现下拉菜单来源:慕课网<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- Bootstrap-Plugin：下拉菜单（Dropdown）插件
ylbtech-Bootstrap-Plugin:下拉菜单(Dropdown)插件 1.返回顶部 1. Bootstrap 下拉菜单(Dropdown)插件 Bootstrap 下拉菜单 这一章讲解了 ...
- SJPullDownMenu下拉菜单框架使用
SJPullDownMenu 快速集成类似淘宝筛选下拉菜单 如果页面显示不全等问题请转至:http://www.jianshu.com/p/d07c6393830c 查看使用 Getting Star ...
- DeDeCMS中如何实现下拉菜单
在5.7版本,已经有比较简单的方法实现下拉菜单,我们可以用它已有方法,也可以用我写的第二种方法来实现 1. 在需要下拉菜单的地方加入以下代码 <div id="navMenu" ...
- Bootstrap下拉菜单
前面的话 网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...
- 『心善渊』Selenium3.0基础 — 13、Selenium操作下拉菜单
目录 1.使用Selenium中的Select类来处理下拉菜单(推荐) 2.下拉菜单对象的其他操作(了解) 3.通过元素二次定位方式操作下拉菜单(重点) (1)了解元素二次定位 (2)示例: 页面中的 ...
随机推荐
- mongoDB3.4的sharding集群搭建及JavaAPI的简易使用
第一部分 在搭建mongoDB之前,我们要考虑几个小问题: 1.我们搭建集群的目的是什么?是多备份提高容错和系统可用性还是横向拓展存储大规模数据还是两者兼有? 如果是为了多备份那么选择replicat ...
- ETH跌破400美元大关 一场收割全球的计划完成闭环
ETH跌破400美元大关 一场收割全球的计划完成闭环 三大交易所,ETH的价格均跌下400美元,看空者占比近80%. 在普通人眼里,这可能只是熊市的一个自然表现. 但事实完全不是这样.这本质上一场历时 ...
- mysql 2
mysql索引原理 初识索引 为什么要索引? 加速查询 读写比10:1左右 什么是索引? 索引在MySQL中也叫是一种“键”,是存储引擎用于快速找到记录的一种数据结构. 索引是应 ...
- GC Root 对象有哪些
(1)虚拟机(JVM)栈中引用对象 (2)方法区中的类静态属性引用对象 (3)方法区中常量引用的对象(final 的常量值) (4)本地方法栈JNI的引用对象
- Cheerleaders UVA - 11806
题目大意是: 在一个m行n列的矩形网格中放置k个相同的石子,问有多少种方法?每个格子最多放一个石子,所有石子都要用完,并且第一行.最后一行.第一列.最后一列都要有石子. 容斥原理.如果只是n * m放 ...
- Linux 安装 RabbitMQ 3.7.8 安装部署
Linux 安装 rabbitmq 3.7.8 安装部署 安装 ncurses 1.安装GCC GCC-C++ Openssl等模块 yum -y install make gcc gcc-c++ k ...
- oracle闪回、闪回数据归档Flashback Data Archive (Oracle Total Recall)的真正强大之处、11gR2增强以及合理使用
oracle的闪回很早就出来了,准确的说一直以来应该都较少被真正用户广为使用,除了dba和极少部分开发人员偶尔用于逻辑出错.误删恢复之外,较少被用于产生更有价值的用途. 各种闪回表flashback ...
- No symbol "xxx" in current context解决
当gdb的版本低于相应的gcc版本的时候,就会出现debug的时候出现No symbol "*" in current context或者The address where a.o ...
- 错误 1 error LNK2019: 无法解析的外部符号 __imp__pthread_create，该符号在函数 _main 中被引用 解决方法
晚上花几分钟在windows下测了下pthread的用法,出现错误 1 error LNK2019: 无法解析的外部符号 __imp__pthread_create,该符号在函数 _main 中被引用 ...
- 【题解】Luogu P1204 [USACO1.2]挤牛奶Milking Cows
原题传送门:P1204 [USACO1.2]挤牛奶Milking Cows 实际是道很弱智的题目qaq 但窝还是觉得用珂朵莉树写会++rp(窝都初二了,还要考pj) 前置芝士:珂朵莉树 窝博客里对珂朵 ...