drop-down

来源：互联网发布：工控编程软件编辑：程序博客网时间：2024/05/09 02:42

下拉菜单

这种方法是基于 A List Part 介绍的 Suckerfish Dropdowns 技术实现的。这个菜单也是基于简单的无序列表实现的。顶级的菜单项是一个主列表，每个主菜单对应的下拉菜单项将放在内嵌列表中：

首先为顶级菜单添加样式规则：去除它的默认的样式，同时将列表项的 float 属性设置成 left ，以使它们以水平方式排列，然后列表项的 position 属性设置成 relative，以便
后续能够定位到其包含的弹出菜单：

强制使菜单中的链接以块形元素的形式显示，从而让它们能够填充菜单项所处的方形区域，在IE6(以及更早期的版本)中无法实现效果，但通过把链接的宽度设置成100%，也能确保可点击的区域扩展到整个容器范围。

接下来，将为生成弹出菜单的内嵌列表添加样式规则：使它们在默认情况下不会显示 (display: none)，而且在显示时使用绝对定位模式，以确保它们不会影响文档其他内容的页面布局。

为了避免弹出菜单也以水平方式排列，所以需要将 float 属性的值设置为 none;
#nav ul li {
float: none;
}

最终，通过使用 :hover伪类使鼠标指针移动到菜单项时显示出弹出菜单：

以上的代码最初将把内嵌列表的 display 属性设置为 none ，当用户将鼠标指针移到主菜单项上时，内嵌列表的 display 属性就将被设置为 block ，菜单也就将显示出来。
但这种效果在IE6中是无法实现的，因为在IE6浏览器中，:hover 伪类仅适用于链接，其他元素都不可用。

其他的CSS代码简单地应用一些可视化样式规则，对菜单的外观提供了一些美化的效果。

注意：
当弹出菜单显示出来时，用户必须向下移动鼠标指针以选中弹出菜单中的某个菜单项，但执行这个操作时，鼠标指针将会从主菜单项上移开，因为 :hover 伪类将不再生效。
看看页面的样式规则，我们就能发现在此使用了绝对定位模式来显示内嵌列表，从而防止对页面中的其他内容产生影响。
理论上我们应该在顶级菜单和弹出菜单之间留出一些空间，这些空间可以通过为顶级菜单添加边距(margin)的方法来实现。但在IE7中，当鼠标指针放在这个边距范围中时，弹出菜单也将消失。因此我们必须通过为顶级菜单应用白色边框(border)来实现这种空间。

我在每个列表项的顶部添加了一个非常小的边距，其值和底部的负边距相等。这将使菜单向下移动一个像素，恰好确保白色边框不会覆盖顶级菜单的底部。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>drop-down</title><link rel="stylesheet" type="text/css" href="menus.css" /><script type="text/javascript">function addClass(li){li.className = 'hover';}function removeClass(li){li.className = '';}</script></head><body> <ul id="nav"><li onmouseover="addClass(this)" onmouseout="removeClass(this)"><a href="#">Starters</a><ul><li><a href="">Fish</a></li><li><a href="">Fruit</a></li><li><a href="">Soups</a></li></ul></li><li onmouseover="addClass(this)" onmouseout="removeClass(this)"><a href="#">Main courses</a><ul><li><a href="">Meat</a></li><li><a href="">Fish</a></li><li><a href="">Vegetarian</a></li></ul></li><li onmouseover="addClass(this)" onmouseout="removeClass(this)"><a href="#">Desserts</a><ul><li><a href="">Fruit</a></li><li><a href="">Puddings</a></li><li><a href="">Ice Creams</a></li></ul></li></ul> </body></html>

@CHARSET "UTF-8";body {font: 1em Verdana, Arial, sans-serif;background-color: #FFFFFF;color: #000000;margin: 1em 0 0 1em;}#nav, #nav ul {padding: 0;margin: 0;list-style: none;}#nav li {float: left;position: relative;width: 10em;border: 1px solid #B0C4DE;background-color: #E7EDF5;color: #2D486C;font-size: 80%;margin-right: 1em;}#nav a:link, #nav a:visited {display: block;text-decoration: none;padding-left: 1em;color: #2D486C;}* html #nav a {width: 100%;}#nav ul {display: none;position: absolute;padding: 0;}#nav ul li {border: 0 none transparent;border-bottom: 1px solid #E7EDF5;border-top: .5em solid #FFF;background-color: #F1F5F9;font-size: 100%;margin-bottom: -1px;margin-top: 1px;padding: 0;}#nav li.hover ul, #nav li:hover ul {display: block;}