html二级菜单:DIV+CSS制作二级菜单（横排二级下拉菜单）以及二级菜单出现错位怎么解决「建议收藏」
html二级菜单:DIV+CSS制作二级菜单（横排二级下拉菜单）以及二级菜单出现错位怎么解决「建议收藏」
全栈程序员站长
发布于 2022-08-11 20:56:41
发布于 2022-08-11 20:56:41
文章被收录于专栏：全栈程序员必看
大家好，又见面了，我是你们的朋友全栈君。
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，就可以；文字的大小尽量小点，不然还是会出现问题。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/131357.html原文链接：https://javaforall.cn
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年4月2，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
