二級菜單的實現思路為：1.在默認狀態下，使用display:none;將二級菜單隱藏。 2.當一級菜單中的列表標簽li獲取焦點(hover)后，使用display:blick;將二級菜單顯示出來。 3.使用position: relative;和position: absolute;分別得一級菜單和二級菜單設置相對定位和絕對定位。
本內容面向小白向，我在代碼中加了詳細的注釋，解釋了語句的作用。
二級菜單展開后 效果如下(沒有美化，見諒)：
HTMl代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>二級菜單</title> <link rel="stylesheet" type="text/css" href="css/index.css"/> </head> <body> <div class="menu"> <ul> <li>首頁</li> <li>博客 <ul> <li>博客1</li> <li>博客2</li> <li>博客3</li> </ul> </li> <!-- 注意：需要將二級菜單的ul放在一級菜單的li標簽內 --> <li>新聞</li> <li>賬戶</li> </ul> </div> </body> </html>
CSS代碼如下：
ul li{ list-style: none; /* 清除列表原有樣式 */ } .menu{ width: 600px; height: 60px; background-color: aquamarine; } .menu ul li{ float: left; /* 使列表(一級菜單)橫向 */ margin-right: 50px; margin-top: 20px; /* 設置一級菜單內容的位置 */ position: relative; } .menu ul li ul{ width: 100px; height: 160px; margin-left: -50px; background-color: #7FFFD4; display: none; /* 設置初始為不顯示 */ position: absolute; } .menu ul li:hover ul{ display: block; /* 當一級菜單的li獲取hover后將二級菜單的ul顯示出來 */ }
原創內容，轉載請注明出處！！！