CSS实现灰色二级下拉菜单

TXT文件

下载需积分: 10 | 4KB | 更新于2024-10-20 | 102 浏览量 | 3 评论 | 举报收藏

立即下载

"这篇资源介绍的是如何使用纯CSS实现一个具有灰色效果的二级下拉菜单，无需JavaScript，简单且实用。适用于多种浏览器，包括IE6、IE7和Firefox。" 在网页设计中，二级下拉菜单是常见的导航结构，尤其在内容较多或分类复杂的网站中。这个例子提供了一种不依赖JavaScript的实现方式，通过CSS来控制菜单的显示和隐藏，以达到动态效果。以下是详细的知识点解释： 1. **CSS选择器和样式**：在CSS代码中，`*`通配符用于设置所有元素的`margin`和`padding`为0，确保页面布局的整洁。`.menu`类用于定义整个菜单的样式，`font-size`和`position`属性分别控制字体大小和定位。`.menuul`和`.menuli`选择器用于处理菜单列表及其子元素的样式。 2. **隐藏和显示二级菜单**：`visibility:hidden`属性将二级菜单隐藏，当鼠标悬停在一级菜单项(`.menuulli:hoverul`)或直接悬停在链接(`.menuula:hoverul`)上时，通过改变`visibility`属性为`visible`来显示二级菜单。这种方法比使用`display:none`更利于SEO，因为隐藏内容对搜索引擎可见。 3. `position`属性：`.menu`、`.menuul`、`.menuli`以及`.menua`等选择器中都使用了`position`属性，以实现菜单项的相对定位和绝对定位。这有助于控制二级菜单相对于一级菜单的位置。 4. **边框和背景**：`.menua`选择器设置了链接的边框、背景色、内边距和颜色，以及鼠标悬停时的样式变化，提供视觉反馈。 5. **兼容性考虑**：在`<meta>`标签中，`Content-Type`确保编码为UTF-8，以支持多语言字符。`<title>`标签中的“CSS˵֧IE6IE7Firefox”表明这个菜单样式在老版本的Internet Explorer（如IE6和IE7）以及Firefox浏览器中也能正常工作，体现了较好的浏览器兼容性。 6. **二级菜单布局**：`.menuulul`、`.menuululli`和`.menuulullia`选择器用于设置二级菜单列表的样式，包括清除浮动、文本对齐和子菜单项的宽度、高度、边框等。`.menuulullia:hover`用于设置二级菜单项被鼠标悬停时的样式变化。这个示例展示了一个基于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="#">XHTML/CSS </a>

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