welcome to ximumu site.這個教程會告訴你如何創建一個簡單的CSS下拉菜單.如果你覺得好就請告訴你的一個朋友讓他也知道這個網站,木木會非常感謝的.^_^ 首先,我們來給這個下拉菜單寫一個HTML的代碼.先創建一個div來做為容器,然后把這個導航菜單放到這個內器里.正如下面的代碼,我們用無序列表來創建這個導航菜單.在這個導航菜單中Portfolio項下有一個子菜單,我用粗體表示出來,最后說一句別忘了關閉</li>(可以看這個:css技巧-清除多余的標簽讓代碼更加有意義)
#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; }
完整的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; }