如果能夠做到每天理解并掌握一個(gè)概念，那么每一個(gè)新的一天，你都是更好的自己。

開(kāi)門見(jiàn)山，先來(lái)看一下今天要實(shí)現(xiàn)的效果：

圖1 下拉框?qū)崿F(xiàn)效果

當(dāng)鼠標(biāo)移到services標(biāo)簽上時(shí)，會(huì)出現(xiàn)下拉框。

在動(dòng)手寫(xiě)代碼前，最好先分析下具體的需求。

根據(jù) 圖1 不難發(fā)現(xiàn)，整個(gè)導(dǎo)航欄分為兩部分，如下圖

圖2 parts

part 1 是導(dǎo)航的主體部分，part 2 是下拉菜單部分。之所以把整個(gè)導(dǎo)航欄分成2個(gè)part是因?yàn)槲覀€(gè)人習(xí)慣把大問(wèn)題打散分成多個(gè)小問(wèn)題，然后逐個(gè)擊破。我覺(jué)得這是一個(gè)很好的思考習(xí)慣，因?yàn)樾?wèn)題往往比較好解決，而大問(wèn)題往往比較宏觀，難以把控。

撇開(kāi)part 2，我們先來(lái)實(shí)現(xiàn)part 1。

根據(jù)經(jīng)驗(yàn)，我們可以很容易的實(shí)現(xiàn)part 1，其實(shí)它就是一個(gè)簡(jiǎn)單的ul。

下面直接上代碼截圖：

圖3 part 1 實(shí)現(xiàn)

在上面的實(shí)現(xiàn)中，關(guān)鍵知識(shí)點(diǎn)涉及到了浮動(dòng)和浮動(dòng)的原理。對(duì)這一塊不是很熟悉的童鞋可以參考張?chǎng)涡翊笊竦奈恼?a target="_blank" rel="nofollow">《CSS float浮動(dòng)的深入研究、詳解及拓展》。

part 1 實(shí)現(xiàn)以后，我們來(lái)想想怎么實(shí)現(xiàn)part 2。仔細(xì)觀察 圖1 可以發(fā)現(xiàn)，services 標(biāo)簽下的下拉菜單應(yīng)該是和 services 同級(jí)的 ul 標(biāo)簽，我們先來(lái)試試把 ul 加上去以后的效果。代碼更新如下圖

圖4 添加子菜單ul

運(yùn)行一下觀察變化

圖5 添加子菜單

接著，為子菜單添加一點(diǎn)樣式

圖6 為子菜單添加樣式

效果如下

圖7 子菜單效果

從 圖7 可以看到，圖1 中的需求已經(jīng)初具雛形了。現(xiàn)在的問(wèn)題就很簡(jiǎn)單了，怎么讓子菜單在鼠標(biāo)未移入 services 標(biāo)簽時(shí)消失，并在鼠標(biāo)移入 services 標(biāo)簽時(shí)顯示呢？這里，我們將用到絕對(duì)定位和hover偽類。

具體請(qǐng)看下面代碼，非常好理解。

圖8 最終代碼

至此，一個(gè)簡(jiǎn)單的導(dǎo)航欄以及下拉菜單就實(shí)現(xiàn)了。

第一次寫(xiě)技術(shù)博客，感覺(jué)還有好多不足，這個(gè)簡(jiǎn)單的例子也是我自己嘗試盲寫(xiě)了好多次才真正實(shí)現(xiàn)的。在實(shí)現(xiàn)的過(guò)程中，逐步逐步的對(duì)其中涉及的一些概念慢慢的有了一點(diǎn)感覺(jué)，但肯定還有許多不足。這僅是css之路的第一步，后面還有很長(zhǎng)的路要走，希望自己可以堅(jiān)持。相比于js，我更喜歡研究css，因?yàn)槲矣X(jué)得css更有趣。你碼的每一行代碼都有可能產(chǎn)生不同的效果，并且當(dāng)你看到一個(gè)十分酷炫的效果，慢慢的分析加實(shí)現(xiàn)的過(guò)程是非常能夠讓我產(chǎn)生滿足感的。雖然我現(xiàn)在還僅僅處在依葫蘆畫(huà)瓢的階段，但是我相信，只要能堅(jiān)持下去，肯定會(huì)成為所謂的“大神的”，加油。

參考書(shū)籍：

《精通CSS 第二版》