CSS下拉菜单兼容IE6-7与Firefox的纯样式实现

需积分: 10 25 浏览量更新于2024-12-15 收藏 4KB TXT 举报

本文档主要介绍了如何使用纯CSS实现一个兼容IE6、IE7和Firefox的下拉菜单。CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML或XML（包括XMLHttpRequest）文档的呈现。在这个例子中，开发者关注的是向后兼容性，确保在这些早期版本的浏览器中也能得到良好的显示效果。首先，文档使用了HTML5的DOCTYPE声明，并设置了字符编码为UTF-8，以及meta标签来控制搜索引擎的行为。网页标题为"CSS菜单，支持IE6 IE7 Firefox"，表明主题是关于一种能在多个旧版浏览器环境下正常工作的CSS下拉菜单设计。 CSS部分，定义了全局的样式规则，如清除内外边距，设置字体大小和定位。`.menu`类定义了菜单的基本样式，包括字体大小、位置（相对于文档流）、层级（z-index）等。`.menu ul`用来隐藏子菜单，初始时其`visibility`属性为`hidden`，只有当鼠标悬停在`.menuli`上时才会变为`visible`。 `.menuli`元素是菜单项，它浮动（`float`）且具有相对定位（`position: relative`），这使得子菜单能够准确地定位在其上方。`.menu ul ul`表示二级菜单，通过设置`position: absolute`和具体的位置值（left和top），使得二级菜单在一级菜单下方弹出。 `.menu a`定义了菜单项的外观，包括边框、背景色、内边距、文本颜色、装饰线等，同时设置了鼠标悬停时的样式变化。`.menu ul ul li`则处理二级菜单的样式，设置了宽度、高度和下划线边框。当鼠标悬停在二级菜单项上时，边框样式会改变，以提供视觉反馈。这个CSS代码实现了一个简洁且具有良好兼容性的下拉菜单，适用于需要在旧版IE浏览器中保持良好用户体验的场景。开发者注重细节，通过巧妙地使用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页未读，立即下载

zhuzi8591

粉丝: 1
资源: 11

CSS下拉菜单兼容IE6-7与Firefox的纯样式实现

纯CSS实现的下拉菜单特效

纯CSS实现的跨浏览器下拉菜单

CSS实现灰色二级下拉菜单

纯div+css下拉菜单支持ie6，ie7、火狐

纯CSS的下拉菜单,支持IE6,IE7,Firefox

支持IE6 IE7 Firefox的纯CSS的下拉菜单

支持IE6 IE7 Firefox 的纯CSS的下拉菜单

纯CSS制作支持IE6、IE7、Firefox的下拉菜单

纯CSS制作支持IE6、IE7、Firefox的下拉菜单特效代码

纯CSS制作支持IE6、IE7、Firefox的下拉菜单.rar

最新资源