利用偽類、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>