然后我們的問題是：這貨怎么一直這么顯示著，這不是我想要的結(jié)果啊，要是可以鼠標劃到上面才顯示，鼠標離開就隱藏有多好？當然了，這種效果幾乎是各個網(wǎng)站所必備的。
第一步：我先把它隱藏掉，省得礙眼。
這個最簡單了，給 #nav>ul>li>ul 選擇器里面加一個屬性就好，display:none;，意思就是顯示方式是不顯示。好了，不礙眼了，但是，他會一直隱藏，那就沒什么作用了，所以：
第二步：鼠標滑過顯示。我們說過鼠標滑過這個狀態(tài)使用偽類 :hover 來表示。所以其實我們?nèi)缦略O(shè)置即可：
#nav>ul>li:hover>ul {
display: block;
}這里要理解的一個問題是，我們把鼠標劃到哪個元素上，而顯示出來的又是哪個元素？那么這里是當鼠標放在 #nav>ul>li 上面的時候，它里面的 ul 被顯示出來。
那么我們預(yù)期的效果就達到了，大家要自己研究一下源碼，定位這個問題在 CSS 里面是個很重要的問題。
然后我們開始下一個練習(xí)，給這個頁面右下添加一個返回首頁的按鈕，就像很多網(wǎng)站都有的那樣。大家應(yīng)該都知道什么樣子，他不隨頁面滾動，一直處于頁面的右下角。
像這種浮于頁面之上的東西，他并不占據(jù)什么位置。也很難說他在邏輯上屬于什么元素。而且它的重要性也不是很高，只是增加用戶體驗，而不是用戶打開頁面所第一預(yù)期的內(nèi)容。所以這種代碼一般放在頁尾，就是 </body> 標簽的前面。
那么這個按鈕寫起來很簡單的：
<div id="go-top"><a href="#">返回<br>頂部</a></div>簡單吧，一個鏈接而已，我們知道 # 可以鏈接到錨點，但是后面如果沒有錨點名稱，只是一個簡單的 #，那就是鏈接到當前頁面的頂部。其實說是滾動上去更貼切一些。里面文字什么的我就不用解釋了吧。
然后給他設(shè)置樣式：
#go-top {
position: fixed;
right: 30px;
bottom: 30px;
border: 1px solid #999;
background: #EEE;
font-size: 12px;
text-align: center;
}
#go-top a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}這個太簡單，不講了。自己動手改改參數(shù)，或者把文字換成圖片玩吧。下節(jié)課開始我們要給這個頁面再加一些高大上的內(nèi)容，哼唧~
效果見下圖的右下角。
本章代碼下載：本章代碼
本書是收費的，不過交費憑自覺。價格定義為每人請我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號：
alay9999@163.com （劉源）
為了讓大家閱讀方便，本書將在如下站點發(fā)布，但最終內(nèi)容以主站為準：
未經(jīng)本人許可，禁止任何形式轉(zhuǎn)載。相關(guān)事宜請聯(lián)系： dms@zji.me
掃碼關(guān)注鍍金池微信號
手機訂課，優(yōu)惠多多