用纯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>两级下拉菜单</title>
    <style type="text/css">
        body{
            font-size:18px;
            margin:0px;            
            }
        #Container{            
            width:600px;
            margin:0 auto;                    
            }
        ul{            
            list-style:none;
            padding:0px;
            margin:0px;            
            }
        li{
            position:relative;
            float:left;
            width:100px;
            border:1px solid #FFF;
            background-color:#999;
            text-align:center;
            }
        li ul{
            display:none;
            margin-top:5px;            
            }
        a:link{
            text-decoration:none;
            color:#FFF;            
            }
        li:hover ul {
            display:block;
            }
        li:hover{
            background-color:#CCC;                        
            }
        #footer{
            width:600px;
            height:200px;
            background-color:#999;
            margin:0 auto;            
            }                
    </style>
</head>

<body>
    <div id="Container">
        <ul>
        
            <li><a href="#">电影</a>         
                <ul><!--二级菜单-->
                    <li><a href="#">敢死队</a></li>
                    <li><a href="#">速度与激情</a></li>
                    <li><a href="#">蜂鸟</a></li>
                </ul>
            </li>
            
            <li><a href="#">歌曲</a>
                <ul><!--二级菜单-->
                    <li><a href="#">好兄弟</a></li>
                    <li><a href="#">相信自己</a></li>
                    <li><a href="#">北京</a></li>
                </ul>
            </li>
                    
        </ul>    
    </div>
    <div id="footer">
    
    </div>
</body>
</html>
View Code

 

posted @ 2013-10-23 10:39  Adolph.One  阅读(135)  评论(0)    收藏  举报