效果如图：

部分代码如图：

<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. vue插槽（slot）的模板与JSX写法

    vue官网API: 插槽:https://cn.vuejs.org/v2/guide/components-slots.html JSX:https://cn.vuejs.org/v2/guide/r ...

  2. DE1+回顾

    本实验使用DE1器件,cyloneV,主要做的基础实验,目的是回顾前期的学习和巩固知识和熟悉操作流程. 视频主要学习的是小梅哥视频. 工程文件夹取名 prj -----   工程文件存放目录(ip文件 ...

  3. 解决VS2013报错fopen、sprintf等函数安全的问题

    VS2013中使用fopen.sprintf等函数是会出现安全问题: error C4996: 'fopen': This function or variable may be unsafe. Co ...

  4. 洛谷P1327 数列排序

    https://www.luogu.org/problem/P1327 #include<bits/stdc++.h> #define Ll long long using namespa ...

  5. jenkins常用

    记最精简版的启动:gradle集成springboot+vue 安装jenkins,安装待推荐插件 服务器安装gradle 服务器安装npm 配置git仓库,配置git开发者账号等 配置gradle构 ...

  6. eclipse非正常关闭，再打开后报错

    Previous operation has not finished; run 'cleanup' if it was interrupted 启动任务管理器,将javaw.exe进程杀死,然后重启 ...

  7. 图的最短路径算法Dijkstra算法模板

    Dijkstra算法:伪代码 //G为图,一般设为全局变量,数组d[u]为原点到达个点的额最短路径, s为起点 Dijkstra(G, d[u], s){ 初始化: for (循环n次){ u = 是 ...

  8. dfs题型二(迷宫问题)

    取自:<王道论坛计算机考研机试指南>6.5节 例 6.7 Temple of the bone(九度 OJ 1461)时间限制:1 秒 内存限制:32 兆 特殊判题:否题目描述:The d ...

  9. MyBatis Generator 超详细配置

    想快速开始,请直接拉到最后,看整体配置. MyBatis Generator 是 MyBatis 提供的一个代码生成工具.可以帮我们生成 表对应的持久化对象(po).操作数据库的接口(dao).CRU ...

  10. SDP协议介绍

    一.SDP协议介绍 SDP 完全是一种会话描述格式 ― 它不属于传输协议 ― 它只使用不同的适当的传输协议,包括会话通知协议(SAP).会话初始协议(SIP).实时流协议(RTSP).MIME 扩展协 ...