效果如图：

部分代码如图：

<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. python3 yield实现假的多并发

    import time def fun1(): while True: print("fun1") time.sleep(0.1) yield def fun2(): while ...

  2. Codeforces Round #610 (Div. 2) A-E简要题解

    contest链接: https://codeforces.com/contest/1282 A. Temporarily unavailable 题意: 给一个区间L,R通有网络,有个点x,在x+r ...

  3. leetcode 869. Reordered Power of 2

    function reorderedPowerOf2(N) { var a1 = N.toString().split('') a1.sort((a, b) => a.localeCompare ...

  4. TCP／IP详解，卷1：协议--第6章 ICMP：Internet控制报文协议

    引言 I C M P经常被认为是 I P层的一个组成部分.它传递差错报文以及其他需要注意的信息. I C M P报文通常被I P层或更高层协议( T C P或U D P)使用.一些I C M P报文把 ...

  5. 简单了解一个WSDL,SOAP的格式

    简单了解一个WSDL,SOAP的格式 2016-06-20 09:34:43 树先生i 阅读数 5187  收藏 更多 分类专栏: WebService   版权声明:本文为博主原创文章,遵循CC 4 ...

  6. torchvision的理解和学习 加载常用数据集，对主流模型的调用.md

    torchvision的理解和学习 加载常用数据集,对主流模型的调用 https://blog.csdn.net/tsq292978891/article/details/79403617 加载常用数 ...

  7. 无聊学习一下MVP这个概念

    记录一下学习MVP,好处是便于替换前台页面(winfrom替换成asp.net),不改变页面逻辑层及其以后的层 M:业务逻辑 V:页面 P:页面逻辑 ,充当 页面和业务逻辑的中间层 规则:V和M不能直 ...

  8. python的os库

    os库(operating system,提供操作系统函数) 1. __file__是什么? ans:当前文件的名字. 例如r.py内容如下 import os if __name__ == &quo ...

  9. Django_后台管理

    1. 站点管理 2. 创建超级管理员 3. 添加自己的数据模型 默认是打印字符串的 4. 个性化站点管理的定制 4.1 个性化规则 admin.py 4.2 布尔值定制显示 4.3 插入班级的时候同时 ...

  10. Linux上安装nodejs

    https://github.com/nodejs/node-v0.x-archive/wiki/Installing-Node.js-via-package-manager#debian-and-u ...