下拉菜单的制作 

<!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=gb2312" />
<title>精美Css+Xhtml下拉菜单</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    
    <h3>本实例不支持IE6.0，抛弃IE6.0从现在做起</h3>
    
    <div id="nav">
        <ul>
            
            <li>我的首页
                <ul>
                    <li><a href="#">我的Png</a></li>
                    <li><a href="#">我的Gif</a></li>
                    <li><a href="#">我的酷站</a></li>
                    <li><a href="#">我的日志</a></li>
                    <li><a href="#">我的相册</a></li>
                    <li><a href="#">我的收藏</a></li>
                </ul>
            </li>
            
            <li>我的首页
                <ul>
                    <li><a href="#">我的Png</a></li>
                    <li><a href="#">我的Gif</a></li>
                    <li><a href="#">我的酷站</a></li>
                    <li><a href="#">我的日志</a></li>
                    <li><a href="#">我的相册</a></li>
                    <li><a href="#">我的收藏</a></li>
                </ul>
            </li>
            
            <li>我的首页
                <ul>
                    <li><a href="#">我的Png</a></li>
                    <li><a href="#">我的Gif</a></li>
                    <li><a href="#">我的酷站</a></li>
                    <li><a href="#">我的日志</a></li>
                    <li><a href="#">我的相册</a></li>
                    <li><a href="#">我的收藏</a></li>
                </ul>
            </li>
            
            <li>我的首页
                <ul>
                    <li><a href="#">我的Png</a></li>
                    <li><a href="#">我的Gif</a></li>
                    <li><a href="#">我的酷站</a></li>
                    <li><a href="#">我的日志</a></li>
                    <li><a href="#">我的相册</a></li>
                    <li><a href="#">我的收藏</a></li>
                </ul>
            </li>
            
        </ul>
    </div>

</body>
</html>

 

CSS文件

body {
    background:#fff;
    font-size:12px;
}
h3 {
    text-align:center;
}
ul {
    margin:0;
    padding:0;
    list-style:none;
}
#nav > ul > li {
    width:120px;
    border:1px solid #eee;
    background:#fafafa;
    padding:4px 0;
    margin:10px;
    text-align:center;
    color:#999;
    cursor:pointer;
    position:relative;
    float:left;
}
#nav > ul > li:hover {
    background:#F1FBEC;
    border:1px solid #9CDD75;
    border-bottom:none;
    color:#666;
}
#nav > ul > li > ul {
    border:1px solid #9CDD75;
    border-top:none;
    background:#F1FBEC;
    position:absolute;
    top:21px;
    left:-1px;
    display:none;
}
#nav > ul > li > ul li {
    width:120px;
    padding:4px 0;
}
#nav > ul > li > ul li a {
    color:#666;
    text-decoration:none;
    display:inline-block;
    width:100px;
    padding:4px 0;
}
#nav > ul > li > ul li a:hover {
    color:#333;
    font-weight:bold;
    background:lightgreen;
}
#nav > ul > li:hover ul {
    display:block;
}

 

 

posted @ 2014-03-22 16:34  胡椒粉hjf  阅读(210)  评论(0)  编辑  收藏  举报