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;}注释掉来看看网页打开后的效果图：
