纯CSS打造的下拉菜单 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #menu {
            margin-left: auto;
            margin-right: auto;
            width: 1000px;
        }


        ul {
            margin: 0px;
            padding: 0px;
            height: 30px;
        }


        ul li {
            float: left;
            display: inline;
            font: 0.9em Arial, Helvetica, sans-serif;
            height: 30px;
            width: 100px;
            list-style: none;
        }


        ul li a {
            color: #F4F4F4;
            text-decoration: none;
            text-align: center;
            line-height: 29px;
            width: 91px;
            margin: 0px;
            padding: 0px 0px 0px 8px;
            display: block;
            border-right: solid 1px #ccc;
            border-bottom: solid 1px #ccc;
            background: #808080;
        }


        ul li ul li {
            height: 25px;
        }


        ul li ul li a {
            background: #666;
            line-height: 24px;
        }


        ul li a:hover {
            background: #666;
        }


        ul li ul {
            visibility: hidden;
        }


        ul li:hover ul {
            visibility: visible;
        }


        ul li ul li a:hover {
            background: #333;
        }
    </style>
</head>
<body>
    <div id="menu">
        <ul>
            <li><a href="#">菜单一</a></li>
            <li>
                <a href="#">菜单二</a>
                <ul>
                    <li><a href="#">子菜单一</a></li>
                    <li><a href="#">子菜单二</a></li>
                    <li><a href="#">子菜单三</a></li>
                </ul>
            </li>
            <li><a href="#">菜单三</a></li>
            <li>
                <a href="#">菜单四</a>
                <ul>
                    <li><a href="#">子菜单一</a></li>
                    <li><a href="#">子菜单二</a></li>
                    <li><a href="#">子菜单三</a></li>
                </ul>
            </li>
            <li><a href="#">菜单五</a></li>
        </ul>
    </div>
</body>
</html>

 

posted @ 2020-09-26 10:43  少司命  阅读(155)  评论(0)  编辑  收藏  举报