效果如图：

部分代码如图：

<li><a href="#" target="_blank">关于我们</a>

	<ul>

	    <li class="top"><a href="#" target="_blank">关于我们</a></li>

	    <li><a href="#" target="_blank">关于我们</a></li>

	    <li><a href="#" target="_blank">关于我们</a></li>

	</ul>

</li>

原因是标签ul有内边距，设置css样式padding:0;可解决这个问题

效果如图：

如在制作二级菜单时使用的是标签dt，dl，解决方案类似。

可参看https://www.cnblogs.com/xiaohaodeboke/p/11650160.html

CSS制作二级菜单时，二级菜单与一级菜单不对齐的更多相关文章

  1. HTML案例—很讨巧的一种js+css制作hover模式展示二级菜单方法

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>利 ...

  2. 纯css制作三级菜单

    <!DOCTYPE html> <html> <head> <title>三级菜单</title> <meta charset=&qu ...

  3. DIV+CSS制作二级横向弹出菜单，略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

  4. 个人练习：使用HTML+CSS制作二级菜单

    最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...

  5. CSS技巧分享：如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

  6. html和css实现一级菜单和二级菜单学习笔记

    实现一级菜单: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...

  7. jQuery制作右侧边垂直二级导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jQuery - 制作点击显示二级菜单效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

随机推荐

  1. js模板引擎mustache介绍及实例

    在Javascript中 mustache.js是实现mustache模板系统. Mustache是一种没有逻辑的模板语法.它可以应用于HTML.配置文件.源代码等任何地方. 它通过使用散列或对象中提 ...

  2. Nginx之反向代理

    所谓,反向代理就是,客户端向A服务器地址发送请求,A服务器接收到客户端请求后又将请求转发给了B服务器,最后又将B服务响应的数据响应给了客户端. 通过配置文件,可以实现Nginx的反向代理. 代码: s ...

  3. windows10 +ubuntu双系统

    1,安装之前的准备: 制作启动盘 确定给ubuntu多少分区并且清理为free状态 确定电脑的开机引导方式,传统方式引号和uefi引导并不一样,因此我们需要根据引导方式选择新系统制作什么样的启动盘 在 ...

  4. try/catch/finally 语句

    定义和用法 try/catch/finally 语句用于处理代码中可能出现的错误信息. 错误可能是语法错误,通常是程序员造成的编码错误或错别字.也 可能是拼写错误或语言中缺少的功能(可能由于浏览器差异 ...

  5. D. Mahmoud and Ehab and another array construction task 因子分界模板+贪心+数学

    D. Mahmoud and Ehab and another array construction task 因子分解模板 题意 给出一个原序列a 找出一个字典序大于a的序列b,使得任意 \(i!= ...

  6. Linux jpeglib库的安装

    tar -zxvf jpegsrc.v9.tar.gz cd jpeg9 ./configure --enable-shared  --enable-static 分别对动态链接库和静态链接库的支持 ...

  7. shiro 配置参数的含义

    anon 任何用户发送的请求都能够访问 authc 经过认证的请求可访问,否则将会将请求重定向到 ini 配置文件配置的 authc.loginUrl 资源,进行认证操作 authc.loginUrl ...

  8. nodejs npm安装教程

    一.使用之前,我们先来掌握3个东西是用来干什么的. npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资 ...

  9. ubuntu16.04spyder闪退

    解决办法我试了好用 sudo pip install --upgrade html5lib==.0b8 完事.

  10. 两台linux之间传输文件

    scp传输 当两台LINUX主机之间要互传文件时可使用SCP命令来实现 scp传输速度较慢,但使用ssh通道保证了传输的安全性 复制文件 将本地文件拷贝到远程 scp local_file remot ...