welcome to ximumu site.這個(gè)教程會(huì)告訴你如何創(chuàng)建一個(gè)簡(jiǎn)單的CSS下拉菜單.如果你覺(jué)得好就請(qǐng)告訴你的一個(gè)朋友讓他也知道這個(gè)網(wǎng)站,木木會(huì)非常感謝的.^_^ 首先,我們來(lái)給這個(gè)下拉菜單寫(xiě)一個(gè)HTML的代碼.先創(chuàng)建一個(gè)div來(lái)做為容器,然后把這個(gè)導(dǎo)航菜單放到這個(gè)內(nèi)器里.正如下面的代碼,我們用無(wú)序列表來(lái)創(chuàng)建這個(gè)導(dǎo)航菜單.在這個(gè)導(dǎo)航菜單中Portfolio項(xiàng)下有一個(gè)子菜單,我用粗體表示出來(lái),最后說(shuō)一句別忘了關(guān)閉</li>(可以看這個(gè):css技巧-清除多余的標(biāo)簽讓代碼更加有意義)
#nav ul li ul { display: none } #nav ul li:hover ul { display: block; position: absolute; }
我們給下拉菜單的懸停狀態(tài)設(shè)置樣式：
#nav ul li:hover ul li a { display:block; background:#12aeef; color:#ffffff; width: 110px; text-align: center; border-bottom: 1px solid #f2f2f2; border-right: none; } #nav ul li:hover ul li a:hover { background:#6dc7ec; color:#fff; }
完整的CSS：
*{ margin:0px; padding: 0px; } #nav { font-family: arial, sans-serif; position: relative; width: 390px; height:56px; font-size:14px; color:#999; margin: 0 auto; } #nav ul { list-style-type: none; } #nav ul li { float: left; position: relative; } #nav ul li a { text-align: center; border-right:1px solid #e9e9e9; padding:20px; display:block; text-decoration:none; color:#999; } #nav ul li ul { display: none } #nav ul li:hover ul { display: block; position: absolute; } #nav ul li:hover ul li a { display:block; background:#12aeef; color:#ffffff; width: 110px; text-align: center; border-bottom: 1px solid #f2f2f2; border-right: none; } #nav ul li:hover ul li a:hover { background:#6dc7ec; color:#fff; }
