CSS禅意花园(3)-利用CSS实现下拉菜单

许多网站都使用了下拉菜单效果，但大部分都是用Javascript实现的。自己写过下拉菜单的人应该知道，处理onmouseover和onmouseout事件极其繁琐。而实际上，仅使用CSS的:hover伪类就能简洁地实现下拉菜单效果。

不过遗憾的是只有完全支持:hover伪类的浏览器如Firefox才能实现这种效果。像IE这种仅能部分支持:hover的浏览器就只能老老实实地用Javascript来做了。

请看下面的代码。

<html>
  <head>
    <style>
    </style>
  </head>
  <body>
    <div id="menu">
      <h3>Select from menu</h3>
      <ul>
        <li>menu item 1</li>
        <li>menu item 2</li>
        <li>menu item 3</li>
        <li>menu item 4</li>
        <li>menu item 5</li>
      </ul>
    </div>
</html>

我们尚未定义样式表，这个页面显示结果就是一个简单的列表。

为了实现下拉菜单，我们先将<ul>元素隐藏起来：

#menu ul { display: none; }

然后应当让菜单在鼠标经过时显示，所以应当为<div>的:hover伪类添加如下定义：

#menu:hover ul { display: block; }

OK，这样一个简单的下拉菜单就做好了。最后的代码如下（对菜单样式作了些修饰）：

<html>
  <head>
    <style>
      #menu {
        font-size: 0.8em;
        width: 150px;
        cursor: pointer;
      }
      #menu ul {
        border: solid 3px #F44;
        background-color: #FCC;
        display: none;
      }

      #menu:hover ul {
        padding: 5px;
        display: block;
        list-style-type: none;
      }

      #menu ul li:hover {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <div id="menu">
      <h3>Select from menu</h3>
      <ul>
        <li>menu item 1</li>
        <li>menu item 2</li>
        <li>menu item 3</li>
        <li>menu item 4</li>
        <li>menu item 5</li>
      </ul>
    </div>
</html>

实现的效果如下所示：

在CSS Zen Garden的一个设计《Tulipe》中应用了这种方法来制作下拉菜单，有兴趣的可以参考。

charlee.li