简单的实现下拉菜单(样式)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>下拉菜单</title>
        <style type="text/css">
            .container{
                width: 1000px;
                margin: 0px auto;
            }
            .nav>ul{
                list-style: none;                
            }
            .nav>ul>li{
                display: inline-block;
                margin-right: 20px;
            }
            .nav>ul a{
                text-decoration: none;
            }
            .submenu{
                list-style: none;
                padding: 0px;
                display: none;
                position: absolute;
            }
            .nav>ul>li:hover .submenu{
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="nav">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">产品中心</a></li>
                    <li>
                        <a href="#">新闻中心</a>
                        <ul class="submenu">
                            <li><a href="#">国内新闻</a></li>
                            <li><a href="#">国际新闻</a></li>
                        </ul>
                    </li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>

posted on 2017-12-28 17:29  空对月  阅读(814)  评论(0编辑  收藏  举报