纯CSS实现导航栏效果

利用伪类、display和盒子模型完成一个CSS导航栏。
CSS样式：

#nav{margin:50px}
.box{width:0;height:0}
.btn{text-align:center;width:100px;height:50px;background-color:#663399}
.btn span{line-height:50px;color:#fff;font-size:16px;font-weight:700}
.btn:hover{background-color:#ffab8e}
.link_list{display:none;width:100px;background-color:#B6B684;text-align:center}
.btn:hover .link_list{display:block}
.link_list ul{margin:0;padding:0;list-style:none}
.link_list ul a{font-size:16px;text-decoration:none}
.link_list li:hover{color:#fff;background-color:brown}

页面代码：

<div id="nav">
    <div class="box">
        <div class="btn">
            <span>今日热卖</span>
            <div class="link_list">
                <ul>
                    <li><a href="#"><span>超连接</span></a></li>
                    <li><a href="#"><span>超连接</span></a></li>
                    <li><a href="#"><span>超连接</span></a></li>
                    <li><a href="#"><span>超连接</span></a></li>
                    <li><a href="#"><span>超连接</span></a></li>
                    <li><a href="#"><span>超连接</span></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>