纯CSS弹出菜单（不支持IE6.0以下）

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #menu li {
            width: 80px;
            height: 30px;
            float: left;
            list-style-type: none;
            background-color: #CCCCCC;
            border: 1px solid #666666;
        }

        #menu a{
            display: block;
            width: 100%;
            height: 100%;
        }

        #menu ul li ul {
            display:none; 
        }
     
        #menu ul li:hover ul{
            display:block; 
            position: relative;
            z-index:1;
            top: 2px;
            left: -41px;
        }
    </style>
</head>
<body>
    <div id="menu">
        <ul>
            <li><a>菜单项</a></li>
            <li><a>菜单项</a></li>
            <li>
                <a>菜单项</a>
                <ul>
                    <li><a>子菜单项</a></li>
                    <li><a>子菜单项</a></li>
                </ul>
            </li>
        </ul>
        <h1>11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</h1>
    </div>
</body>
</html>
纯CSS弹出菜单（不支持IE6.0以下）

推荐阅读
