CSS驱动的下拉菜单

<!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>menu</title>
    <style type="text/css">
    <!--
    div{margin:100px;width:200px;}
    li{background:#ccc;}
    li ul {display:none;}
    li:hover ul{display:block;}
    -->
    </style>
</head>
<body>
    <div>
    <li><a href='#'>Menu</a>
        <ul>
            <li><a href='#'>one</a></li>        
            <li><a href='#'>two</a></li>
            <li><a href='#'>three</a></li>
            <li><a href='#'>four</a></li>
        </ul>
    </li>
    </div>
</body>
</html>


 原理是通过 :hover来控制<li>的显示也消失。任何<li>中的<ul>都会被初始化为隐藏。当鼠标悬停的时候才会显示。

但是IE6和更早的版本不支持li:hover。其他浏览器包括Safari for windows，firefox3，IE7，Opera都可以实现下拉菜单的效果。

这个是在一本讨论JS的书上看到的方法。个人觉得如果需要制作相同的下拉菜单的话，用CSS实现比较省事。但绝大多数人都习惯通过JS实现。撇开IE6的支持的问题。我觉得更多的时候只是个人选择的问题。当习惯了用JS实现并且已经有一套成熟的方法的时候，何乐而不为呢？呵呵。

关于IE6的问题。我觉得这个不是问题。已经可以忽略IE6了吗？我觉得现在不行，但是时间不会很久。毕竟IE8都出了。

posted on 2008-11-26 10:33  Yinkan  阅读(253)  评论(0)  编辑  收藏  举报

导航