html二级菜单:DIV+CSS制作二级菜单（横排二级下拉菜单）以及二级菜单出现错位怎么解决
生活随笔
收集整理的這篇文章主要介紹了
html二级菜单:DIV+CSS制作二级菜单（横排二级下拉菜单）以及二级菜单出现错位怎么解决
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
html二級菜單制作（橫排二級下拉菜單）以及二級菜單出現錯位怎么解決
摘要：DIV+CSS制作二級菜單（橫排二級下拉菜單）以及二級菜單出現錯位怎么解決（解決辦法放在代碼下面）
1.先看一下最終的效果圖
2. 來先看具體代碼吧，設計的具體思路就放在代碼下面哈哈哈ヾ(≧▽≦*)o
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>二級菜單</title><style>/*去除網頁原有的格式*/* { margin:0; padding:0;}/*去除標簽前的圓點*/ul, li { list-style:none;}/*去除下劃線*/a { text-decoration:none;}/*盛放二級菜單的盒子*/.mxl_bigbox_10{width: 620px;height:300px;background-color: pink;margin: 15px auto auto 30%;float:left;position: relative;padding-left:15px;padding-top: 15px: }ul li{float:left; }ul li a{width:120px;height:30px;font-size: 20px;text-align: center;font-family: 宋體；line-height: 25px;/*將元素顯示為塊級元素display:block;*/display: block;border-right:2px solid silver;border-bottom: 0.3px solid silver;background-color: #E8E8E8;color:black;}/*鼠標懸停改變背景顏色*/ul li a:hover{background-color:aqua; }/*display:none;用來隱藏二級菜單 */ul li ul{position: absolute;display:none;}/*float:none;使二級菜單不左右浮動也是默認值*/ul li ul li{float: none;}ul li ul li a{border-top:1px dashed silver; }/*在鼠標移到li上的時候它下面的ul會顯示*/ ul li:hover ul{display:block;}</style></head> <body><div class="mxl_bigbox_10"><ul><li><a href="#">首頁</a><ul><li><a href="#">2級菜單</a></li><li><a href="#">2級菜單</a></li><li><a href="#">2級菜單</a></li><li><a href="#">2級菜單</a></li><li><a href="#">2級菜單</a></li></ul> </li><li><a href="">驗收專欄</a><ul> <li><a href="#">2級菜單</a></li><li><a href="#">2級菜單</a></li><li><a href="#">2級菜單</a></li><li><a href="#">2級菜單</a></li><li><a href="#">2級菜單</a></li></ul></li><li><a href="">專業概況</a><ul><li><a href="#">2級菜單</a></li><li><a href="#">2級菜單</a></li><li><a href="#">2級菜單</a></li><li><a href="#">2級菜單</a></li><li><a href="#">2級菜單</a></li></ul></li><li><a href="">教學資源</a><ul><li><a href="#">2級菜單</a></li><li><a href="#">2級菜單</a></li><li><a href="#">2級菜單</a></li><li><a href="#">2級菜單</a></li><li><a href="#">2級菜單</a></li></ul></li><li><a href="">獲獎狀況</a><ul><li><a href="#">2級菜單</a></li><li><a href="#">2級菜單</a></li><li><a href="#">2級菜單</a></li><li><a href="#">2級菜單</a></li><li><a href="#">2級菜單</a></li></ul></li></ul></div> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="知識共享許可協議" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />本作品采用<a rel="license" href="http://creativecommons.org/licenses/by/4.0/">知識共享署名 4.0 國際許可協議</a>進行許可。</body> </html>3.二級菜單出現錯位解決辦法如下：
錯位原因：再css樣式里即內沒有添加去掉網頁原有屬性的代碼（* { margin:0; padding:0;}），接下來我把源代碼里的 * { margin:0; padding:0;}注釋掉來看看網頁打開后的效果圖：
很明顯已經錯位了！
ヾ(≧▽≦*)o😊喜歡的話就留個贊吧！
😊😊布局思路：通過 ul li ul li的嵌套以及使用div 、css 、a三種標簽來一起實現二級菜單。
具體步驟如下：
1. 首先在body部分用div標簽做一個盒子，在盒子內部（div內部） 用“<ul><li><a>一級菜單</a></li></ul>”生成一級菜單然， 但是此時所有一級菜單帶式豎向排列的，每個一級菜單還需要在style內把一級菜單通過“display：block;”設置成塊，再給他們加上邊框；
2.然后通過“float：left；”控制浮動，這樣橫向排列的一級菜單就好了；一些細節方面比如一級菜單的邊框顏色、像素大小、背景色文字在框里的位置都得設置好。
3.接著在一級菜單里嵌入二級菜單即<ul><li><a>一級菜單</a><ul><li><a>二級菜單</a></li></ul></li></ul>
4.嵌入后接下來控制二級菜單的樣式，通過絕對定位使二級菜單出現在一級菜單下然后隱藏即“{ position:absolute; display:none;}”，但是這時二級菜單還是橫向排列的，只需用“float:none;”不讓其左右浮動就可以完成。
5.最后，當鼠標移動到一級菜單上時二級菜單這時時顯示不出來的，還需要添加“ul li:hover ul{ display:block}”使二級菜單顯示出來；下面的文字部分和圖片部分是用兩個小盒子，通過類選擇器獨立控制各自的樣式。
🎈🎈🎈注意點：盛放二級菜單的盒子寬度，要根據標簽的寬度來決定 ；比如你的ul li {width: 60px;height:30px} 有六個一級菜單，那么60*6=360那么你的盒子的寬度要至少大于300左右；
🎈🎈🎈 padding屬性還會撐大盒子，所以在調節標簽里的文字居中時盡量不要用padding,建議使用text-align：center；和line-height:多少px;一起使用，主要調節line-height，就可以；文字的大小盡量小點，不然還是會出現問題。
總結
以上是生活随笔為你收集整理的html二级菜单:DIV+CSS制作二级菜单（横排二级下拉菜单）以及二级菜单出现错位怎么解决的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python图片剪裁（图片按四个点坐标剪
- 下一篇： CSS：个人常用搜索框样式