一个简单的导航栏菜单实现 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .db {
            background-color: #2c5fa0;
            font-size: larger;
            color: #ffffff;
            width: 110px;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
        }

        .menu ul {
            list-style: none; /* 去掉ul前面的符号 */
            margin: 0px; /* 与外界元素的距离为0 */
            padding: 0px; /* 与内部元素的距离为0 */
            width: auto; /* 宽度根据元素内容调整 */
        }

            .menu ul li {
                float: left;
                position: relative;
                width: auto;
            }

                .menu ul li:hover .db {
                    background-color: #0528a0;
                }

                .menu ul li ul {
                    visibility: hidden;
                    position: absolute;
                    z-index: 9999; /* 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面 */
                    width: auto;
                }

                    .menu ul li ul li {
                        font-size: large;
                        text-align: center;
                        vertical-align: middle;
                        background: #0528a0;
                        width: auto;
                        min-width: 180px;
                        border-bottom: 0px solid white;
                        white-space: nowrap;
                        height: 40px;
                        line-height: 40px;
                    }

                        .menu ul li ul li:hover {
                            background-color: #2c5fa0;
                        }

                        .menu ul li ul li a {
                            display: block;
                            color: #ffffff;
                            text-decoration: none;
                            font-weight: 500;
                            width: auto;
                        }

                .menu ul li:hover ul {
                    visibility: visible;
                    display: block;
                }

                    .menu ul li:hover ul li a:hover {
                        font-size: 20px;
                    }
    </style>
</head>
<body>
    <div class="menu" style="margin-left: auto; margin-right: auto; text-align: center;">
        <ul>
            <li>
                <div class="db" onclick="alert('AAA'); ">AAA</div>
            </li>
            <li>
                <div class="db">BBB</div>
                <ul>
                    <li><a href='#' onclick="alert(111);">BBB111</a> </li>
                </ul>
            </li>
            <li>
                <div class="db">CCC</div>
                <ul>
                    <li><a href='#' onclick="alert(222);">CCC222</a> </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

具体效果

 

posted @ 2016-04-21 10:08  WmW  阅读(433)  评论(0)  编辑  收藏  举报