纯css下拉菜单的制作

通过观察下拉菜单的过程，发现有两种状态，一种是鼠标没有hover时，一种是鼠标hover时。

主菜单hover时，显示子菜单；主菜单没有hover时，不显示子菜单

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>下拉菜单</title>
<link type="text/css" rel="stylesheet" href="./css/reset.css" />
<style>
/* no hover 状态 */
.xiala_menu{
    width:30%; /* 调整宽度 */
    margin:0 auto;
    text-align:center;
}
.xiala_menu li{
    width:80px;
    float:left;
    background:#e5e5e5;
    margin-right:1px;
}
.xiala_menu li ul{
    display:none;
}
/* hover 状态 */
.xiala_menu li:hover ul{
    display:block;
}
.xiala_menu li:hover ul li{
    background:#ccc;
    margin:1px 0;
    cursor:pointer;
}

.xiala_menu li:hover ul li:hover{
    color:red;
    background:#bdbdbd;
}
</style>
</head>

<body>
<div class="xiala_wrap">
    <ul class="xiala_menu clearfix">
        <li>
            菜单1
            <ul>
                <li>
                    菜单11
                </li>
                <li>
                    菜单11
                </li>
                <li>
                    菜单11
                </li>
                <li>
                    菜单11
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

posted @ 2015-08-27 09:55 刘一二阅读(239) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球运作规律

纯css下拉菜单的制作

最新随笔

随笔分类 (159)

随笔档案 (155)