CSS的下拉菜单,支持IE6IE7Firefox资源-CSDN文库

需积分: 10 156 浏览量 2009-07-22 10:12:55 上传评论收藏 4KB TXT 举报

### CSS的下拉菜单，支持IE6 IE7 Firefox #### 概述本文将详细介绍一个兼容Internet Explorer 6（IE6）、Internet Explorer 7（IE7）以及Firefox浏览器的纯CSS下拉菜单实现方法。该下拉菜单不仅具有良好的跨浏览器兼容性，还通过巧妙的CSS样式设置实现了美观且实用的功能。 #### 代码解析 - **文档类型声明**：`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">` - 使用XHTML 1.0 Strict文档类型定义，确保代码的规范性和一致性。 - **基本页面结构**： - `<html xmlns="http://www.w3.org/1999/xhtml">` - 设置XML命名空间，符合XHTML标准。 - `<head>` - 包含元数据、标题和样式表等信息。 - **元数据设置**： - `<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>` - 设置字符集为UTF-8。 - `<meta name="robots" content="all"/>` - 告诉搜索引擎可以抓取此页面的所有内容。 - **CSS样式解析**： - **基础样式**： - `* { margin: 0; padding: 0; }` - 清除默认边距和填充，保持元素之间的间距一致。 - `.menu { font-size: 12px; position: relative; z-index: 100; }` - 设置`.menu`类的基础字体大小、定位属性以及层级顺序。 - **菜单结构**： - `.menu ul { list-style: none; }` - 移除列表项符号。 - `.menu li { float: left; position: relative; }` - 将列表项设置为水平浮动显示，并使其相对定位，以便后续元素的定位。 - `.menu ul ul { visibility: hidden; position: absolute; left: 3px; top: 23px; }` - 设置二级菜单初始状态为隐藏，并绝对定位在一级菜单项下方适当位置。 - **悬停效果**： - `.menu ul li:hover ul, .menu ul a:hover ul { visibility: visible; }` - 当鼠标悬停在一级菜单项或链接上时，显示对应的二级菜单。 - **链接样式**： - `.menu a { display: block; border: 1px solid #aaa; background: #cacaca; padding: 2px 10px; margin: 3px; color: #fff; text-decoration: none; }` - 设置链接的基本样式，包括边框、背景色、内边距、外边距、颜色和去除下划线。 - `.menu a:hover { background: #fafafa; color: #000; border: 1px solid #000; }` - 设置链接的悬停效果，包括改变背景色、文本颜色和边框颜色。 - **二级菜单项样式**： - `.menu ul ul li { clear: both; text-align: left; font-size: 12px; }` - 设置二级菜单项的对齐方式和字体大小。 - `.menu ul ul a { display: block; width: 100px; height: 15px; margin: 0; border: 0; border-bottom: 1px solid #858585; }` - 设置二级菜单项链接的宽度、高度、边框和底部边框颜色。 - `.menu ul ul a:hover { border: 0; background: #fafafa; border-bottom: 1px solid #fff; }` - 设置二级菜单项链接的悬停效果，包括改变背景色和底部边框颜色。 #### 兼容性处理 - **针对IE6和IE7的兼容性代码**： - 使用条件注释`<!--[if lte IE6]>`和`<!--[if IE7]>`来区分不同版本的IE浏览器，并应用不同的HTML结构来兼容这些旧版浏览器。 - 在IE6中，使用了`<table>`元素作为嵌套容器，以解决某些布局问题。 - 在IE7中，则直接使用了正常的HTML结构。 #### 总结本文介绍了一个兼容IE6、IE7及Firefox浏览器的纯CSS下拉菜单实现方案。通过合理的CSS布局和样式设置，结合对特定浏览器的兼容性处理，该方案能够有效地在多种浏览器环境下正常工作。这对于需要支持旧版浏览器的项目来说非常有用。

资源推荐

资源详情

资源评论

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="all" />
<title>纯CSS的下拉菜单支持IE6 IE7 Firefox</title>
<style type="text/css">
*{margin:0;padding:0;}
.menu{font-size:12px;position:relative;z-index:100;}
.menu ul{list-style:none;}
.menu li {float:left;position:relative;}
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}
.menu table {position:absolute; top:0; left:0;}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}
.menu a{display:block;border:1px solid #aaa;background:#cacaca;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}
.menu a:hover{background:#fafafa;color:#000;border:1px solid #000;}
.menu ul ul{}
.menu ul ul li {clear:both;text-align:left;font-size:12px;}
.menu ul ul li a{display:block;width:100px;height:15px;margin:0;border:0;border-bottom:1px solid #858585;}
.menu ul ul li a:hover{border:0;background:#fafafa;border-bottom:1px solid #fff;}
</style>
</head>

<body>

<div class="menu">
<ul>
<li><a href="http://www.lanrentuku.com/">XHTML/CSS
</a>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论收藏

内容反馈