HTML+CSS implements navigation bar secondary drop-down menu HTML page
If we want to achieve the effect as shown below
We only need to make corresponding styles for the corresponding html tags. Now we first put the html page tags Write it out, the code is as follows
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>導(dǎo)航欄加下拉菜單</title> </head> <body> <div id="menu"> <ul> <li><a href="" class="nodrop">首 頁</a></li> <li><a href="" class="drop">最火下載站</a> <div class="dropdown_1column"> <div class="col_1"> <ul class="simple"> <li><a href="#">網(wǎng)站建設(shè)</a></li> <li><a href="#">導(dǎo)航條代碼</a></li> <li><a href="#">最火下載站</a></li> <li><a href="#">電子商務(wù)</a></li> <li><a href="#">網(wǎng)站制作</a></li> </ul> </div> </div> </li> <li><a href="#" class="drop">網(wǎng)站建設(shè)</a> <div class="dropdown_1column"> <div class="col_1"> <ul class="simple"> <li><a href="#">網(wǎng)站建設(shè)</a></li> <li><a href="#">導(dǎo)航條代碼</a></li> <li><a href="#">最火下載站</a></li> <li><a href="#">網(wǎng)站推廣</a></li> <li><a href="#">網(wǎng)站優(yōu)化</a></li> <li><a href="#">網(wǎng)站制作</a></li> </ul> </div> </div> </li> <li><a href="#" class="drop">網(wǎng)絡(luò)營銷</a> <div class="dropdown_1column"> <div class="col_1"> <ul class="simple"> <li><a href="#">網(wǎng)站建設(shè)</a></li> <li><a href="#">導(dǎo)航條代碼</a></li> <li><a href="#">最火下載站</a></li> <li><a href="#">電子商務(wù)</a></li> <li><a href="#">網(wǎng)站推廣</a></li> <li><a href="#">網(wǎng)站優(yōu)化</a></li> <li><a href="#">網(wǎng)站制作</a></li> </ul> </div> </div> </li> <li><a href="#" class="drop">網(wǎng)絡(luò)營銷</a> <div class="dropdown_1column"> <div class="col_1"> <ul class="simple"> <li><a href="#">網(wǎng)站建設(shè)</a></li> <li><a href="#">導(dǎo)航條代碼</a></li> <li><a href="#">最火下載站</a></li> <li><a href="#">電子商務(wù)</a></li> <li><a href="#">網(wǎng)站推廣</a></li> <li><a href="#">網(wǎng)站制作</a></li> </ul> </div> </div> </li> <li><a href="#" class="nodrop">關(guān)于我們</a></li> <li><a href="#" class="nodrop">聯(lián)系我們</a></li> </ul> </div> </body>
You can change the information inside to the information you need
The above code cannot yet achieve the effect of our navigation bar’s secondary drop-down menu. We Seeing the above code, we gave the corresponding class name. Now the next step is to make css styles for the above class, so as to achieve the effect we want
