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

html二级菜单:DIV+CSS制作二级菜单（横排二级下拉菜单）以及二级菜单出现错位怎么解决相关推荐

  1. html下拉菜单图片,JS+CSS 制作的超级简单的下拉菜单附图

    先看效果: 代码: Good Test function showSubMenu(SubMenu) { document.getElementById(SubMenu).style.display = ...

  2. 纯div+css制作的弹出菜单

    纯div+css制作的弹出菜单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  3. 纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

    原文:纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器) 虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul ...

  4. 纯CSS实现简约大方灰紫色下拉菜单代码

    代码简介:又一个漂亮的纯CSS实现的下拉导航菜单,横向布局,适合作网站导航条,银色渐变色,鼠标放上更换菜单背景,用户体验极好,而且兼容性好,特别是对IE比较友好,火狐下也几乎不错位,推荐给站长使用. ...

  5. html语言制作留言条,利用DIV+CSS制作右下角弹出留言板

    /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 利用DIV+CSS制作右下角弹出留言板 a ...

  6. html把div分成两栏,div+css制作上中下，中间两列的全屏自适应布局

    制作自适应布局的网页对初学者是个难点,今天我们以最常见的上中下结构,中间又分为两列的全屏自适应布局为例,教大家如何制作自适应布局网页. 上中下结构,中间又分为两列的全屏自适应布局HTML代码: 上中下 ...

  7. div做表格 html5,div+css制作表格

    本章给大家介绍如何用div+css制作表格,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. html: 花名册: 序号 姓名 年龄 footer footer footer 1 Jo ...

  8. HTML+CSS初学者练习项目4：利用DIV+CSS制作《互联世纪网》

    适合初学者练习的HTML项目:利用DIV+CSS制作制作一个<互联世纪网>网页. 需要掌握内容: HTML+CSS第八课:使用CSS布局网页--网页中块级元素与行内元素.盒子模型的理解 H ...

  9. android 系统下拉菜单,【MotoX评测】原生Android5.0下拉菜单和基础设置_Moto X_手机评测-中关村在线...

    ■ 柔和的阶段性下拉菜单 受益于Android5.0的变化,新Moto X的下拉菜单采用的是浮在界面上方的下拉框,并且分为双步下拉(第一步下拉是通知中心,第二步下拉可调出快捷选项),视觉效果和操作体验 ...

  10. AlphaControls 控件 TsFrameBar 创建下拉式多级导航菜单

    AlphaControls 控件 TsFrameBar 创建下拉式多级导航菜单 TsFrameBar控件是创建一个下拉菜单的工具块.     TsFrameBar控件本身,可以通过创建TITEMS,自 ...

最新文章

  1. Android中获取屏幕的宽和高
  2. SAP客户合作伙伴关系使用说明
  3. 给Source Insight做个外挂系列之二－－将本地代码注入到Source Insight进程
  4. Linux QoS egress处理流程
  5. NDoc修改版,支持中文注释及中文界面。
  6. 网络爬虫--16.BeautifulSoup4
  7. JAVA多线程互斥同步例子
  8. 计算机组成原理艾列富,理论结合实验的计算机组成原理课程教学措施初探.pdf...
  9. 用 Python 分析今年考研形势
  10. 【Intellij】Hot Swap Failed class reloaded
  11. 计算机中那些事儿（十）:资料管理一些建议---实践篇
  12. Python 标准库 csv —— csv 文件的读写
  13. 项目管理-项目启动会
  14. Truecrypt加密软件文件检测
  15. [转]Netlog 的数据库及 LAMP 架构
  16. wamp 升php7,wamp升级php7
  17. 网络触发的detach
  18. flutter 九宫格菜单_flutter九宫格图片查看器
  19. Excel表中查找、去除重复项方法合集
  20. 数据定义语言 - DDL

热门文章

  1. Python量化学习笔记04——量化投资——以Python为工具 Part01-C04
  2. 外贸找客户软件：G-EXTRACTOR V.20
  3. 最新小程序反编译的获取流程
  4. 东南大学破格保研挂科_东南大学破格保研挂科_兜兜转转终入四牌楼——东南大学保研心得...
  5. 苹果手机速度慢_安卓日语App，苹果也看进来
  6. 计算机图形图像处理专业学什么,计算机图形图像处理教学大纲
  7. Fortigate（飞塔）防火墙密码恢复
  8. 计算机第一级开机密码设置,电脑如何设置开机密码 电脑开机密码设置方法
  9. MongoDB 极简实践入门学习（转载）
  10. 苹果保修期查询_保修期还有6个月的IPhone X 换个“新”主板变“过保”了 维修点这样回应...