返回顶部

收藏

纯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>纯css圆角下拉菜单</title>
<style type="text/css">
*{margin:0; padding:0;}
#nav{
width:608px;
margin:10px auto;
font-family:Arial;
font-size:16px;
color:#0000FF;}
#nav b{
    clear:both;
    display:block;
    height:1px;
    background: #333;
}

.b1,.b10{margin:0 4px;}
.b2,.b9{margin:0 3px; border-left:solid 1px; border-right:solid 1px;}
.b3,.b8{margin:0 2px; border-left:solid 1px; border-right:solid 1px;}
.b4,.b7{margin:0 1px;border-left:solid 1px; border-right:solid 1px;}
.b5,.b6{margin:0;}

#nav #dh{
    height:24px;
    background: #333;

}
#nav #dh a{display:block;
text-decoration:none;
float:left;
width:100px;
text-align:center;
border-right:solid  #CCC 1px;
line-height:150%;
color: #FFF;
position:relative;

}
#nav #dh a.limit{
    border:none;
}
#nav #dh a ul{
    list-style:none;
    position: absolute;
    display:none;
    background: #333;
    left:0;
    top:24px;

    }
#nav #dh a ul li{
    width:100px;

    }

#nav #dh a:hover ul{
    display:block;
    }   
#nav #dh a:hover ul li:hover{
    background:#CC9966;
    color:#FFFF00;
    }   

</style>
</head>

<body>
<div id="nav">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="b5"></b>
<div id="dh">
        <a href="#">首页
        <ul>
        <li>下载排行</li>
        <li>最近更行</li>
        </ul>
        </a>
        <a href="#">ASP
        <ul>
        <li>企业整站</li>
        <li>图片相册</li>
        <li>社区程序</li>
        </ul>
        </a>
        <a href="#">PHP
         <ul>
        <li>博客微博</li>
        <li>社区论坛</li>
        <li>社区程序</li>
        </ul>

        </a>
        <a href="#">JSP
         <ul>
        <li>企业</li>
        <li>新闻系统</li>
        <li>留言</li>
        </ul>
        </a>
        <a href="#">VC++
         <ul>
        <li>企业整站</li>
        <li>图片相册</li>
        <li>社区程序</li>
        </ul>
        </a>
        <a  class="limit" href="#">DELPHI
         <ul>
        <li>系统相关</li>
        <li>算法</li>
        <li>数据库</li>
        </ul>
        </a>
</div>
<b class="b6"></b>
<b class="b7"></b>
<b class="b8"></b>
<b class="b9"></b>
<b class="b10"></b>
</div>
</body>
</html>

标签:html

收藏

0人收藏

支持

0

反对

0