效果如图：

部分代码如图：

<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. 140. 单词拆分 II

    Q: 给定一个非空字符串 s 和一个包含非空单词列表的字典 wordDict,在字符串中增加空格来构建一个句子,使得句子中所有的单词都在词典中.返回所有这些可能的句子. 说明: 分隔时可以重复使用字典 ...

  2. 虚拟机linux系统网络连接配置问题总结

    1.虚拟机与CentOS的安装与配置参考本人博客:https://www.cnblogs.com/ClikeL/p/11743520.html 2.测试网络连接 ping www.baidu.com ...

  3. npm解决node-sass安装失败

    npm装包一直都很成功,直到我遇见了node-sass这个包 我一直报这样的错误 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! node-sas ...

  4. ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

    https://blog.csdn.net/qq_21419015/article/details/80420815 第一个MVC应用程序 1创建MVC项目 打开VS ,File--新建--项目,选择 ...

  5. Educational Codeforces Round 76 (Rated for Div. 2) D. Yet Another Monster Killing Problem

    You play a computer game. In this game, you lead a party of mm heroes, and you have to clear a dunge ...

  6. NotePad++安装及配置

    NotePad++是一款轻量级的语言开发工具,是学习编程语言入门工具. 下面介绍下配置方法(Java为例) 配置插件NppExec 配置JAVA编译命令javac 配置JAVA运行命令java 上述两 ...

  7. 源码安装python 报错，openssl: error while loading shared libraries: libssl.so.1.1

    在执行openssl version出现如下错误: openssl: error while loading shared libraries: libssl.so.1.1: cannot open ...

  8. 1167E - Range Deleting 双指针

    题意:给出n个数的序列,并给出x,这n个数的范围为[1,x],f(L,R)表示删除序列中取值为[l,r]的数,问有几对L,R使得操作后的序列为非递减序列 思路:若[l,r]成立,那么[l,r+1],. ...

  9. leetcode 72.编辑距离（dp）

    链接:https://leetcode-cn.com/problems/edit-distance/submissions/ 设dp[i][j]表示串s1前i个字符变换成串s2前j个字符所需要的最小操 ...

  10. opencv：图像去噪（椒盐噪声）

    #include <opencv2/opencv.hpp> #include <iostream> using namespace cv; using namespace st ...