html css 多级菜单实例

时间：2014-10-13 20:36:27 阅读：395 评论：0 收藏：0 [点我收藏+]

标签：style blog http color io ar sp div on

<!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>
    <title></title>
    <style type="text/css">
        ul
        {
            list-style: none;
        }
        a
        {
            text-decoration: none;
        }
        .fist_menu
        {
            text-align: center;
        }
        .fist_menu > li
        {
            float: left;
            width: 100px;
            height: 20px;
            border: 1px solid silver;
            background-color: Yellow;
            cursor: pointer;
        }
        .fist_menu > li > ul
        {
            margin: 0px;
            border: 1px solid white;
            display: none;
        }
        .fist_menu > li > ul > li
        {
            height: 20px;
            background-color: Gray;
            border: 1px solid white;
        }
        .fist_menu > li:hover > ul
        {
            display: block;
        }
        .thirdly_menu
        {
            margin-top: -20px;
            margin-left: 98px;
            display: none;
            width: 105px;
            
        }
        .thirdly_menu>li
        {
            background-color: Red;
            border: 1px solid white;
        }
        .fist_menu > li > ul > li:hover ul
        {
            display: block;
        }
    </style>
</head>
<body>
    <div>
        <ul class="fist_menu">
            <li><a href="#">A</a>
                <ul>
                    <li><a href="#">A1</a></li>
                    <li><a href="#">A2</a></li>
                    <li><a href="#">A3</a></li>
                </ul>
            </li>
            <li><a href="#">B</a>
                <ul>
                    <li><a href="#">B1</a>
                        <ul class="thirdly_menu">
                            <li><a href="#">B1_1</a></li>
                            <li><a href="#">B1_2</a></li>
                            <li><a href="#">B1_3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">B2</a>
                        <ul class="thirdly_menu">
                            <li><a href="#">B2_1</a></li>
                            <li><a href="#">B2_2</a></li>
                            <li><a href="#">B2_3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">B3</a>
                        <ul class="thirdly_menu">
                            <li><a href="#">B3_1</a></li>
                            <li><a href="#">B3_2</a></li>
                            <li><a href="#">B3_3</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">C</a>
                <ul>
                    <li><a href="#">C1</a></li>
                    <li><a href="#">C2</a></li>
                    <li><a href="#">C3</a></li>
                </ul>
            </li>
            <li><a href="#">D</a>
                <ul>
                    <li><a href="#">D1</a></li>
                    <li><a href="#">D2</a></li>
                    <li><a href="#">D3</a></li>
                </ul>
            </li>
            <li><a href="#">E</a>
                <ul>
                    <li><a href="#">E1</a></li>
                    <li><a href="#">E2</a></li>
                    <li><a href="#">E3</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

html css 多级菜单实例

标签：style blog http color io ar sp div on

原文地址：http://www.cnblogs.com/L-unatic/p/4022819.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行