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><href='#'>Menu</a>
        
<ul>
            
<li><href='#'>one</a></li>        
            
<li><href='#'>two</a></li>
            
<li><href='#'>three</a></li>
            
<li><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编辑  收藏  举报

导航