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="/licenses/by/4.0/"><img alt="知识共享许可协议" style="border-width:0" src="/l/by/4.0/88x31.png" /></a><br />本作品采用<a rel="license" href="/licenses/by/4.0/">知识共享署名 4.0 国际许可协议</a>进行许可。</body></html>