效果如图:

部分代码如图:

<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. 数据库之一、数据库简介及SQL概要

    1.数据库简介: 数据库(Database,DB)是一个长期存储在计算机内的.有组织的.有共享的.统一管理的数据集合.简单来讲就是可以放大量数据的地方.管理数据库的计算机系统称为数据库管理系统(Dat ...

  2. Thinkcmf对接支付宝支付和获取用户信息

    一.         登录支付宝开放平台 平台地址:https://open.alipay.com/ 二.         创建应用并申请上线 登录后,[进入我的开放平台],依次点击[开发者中心]-& ...

  3. python 日志模块 日志格式

    形如: formatter = logging.Formatter("%(asctime)s %(levelname)s %(message)s","%Y%b%d-%H: ...

  4. SSH通道 Xshell

    SSH是每一台Linux电脑的标准配置. SSH是一种网络协议,用于计算机之间的加密登录(安全的). 1.  登录远程主机    $ ssh user@host    2.  SSH的默认端口是22, ...

  5. HBase 中读 HDFS 调优

    HDFS Read调优 在基于 HDFS 存储的 HBase 中,主要有两种调优方式: 绕过RPC的选项,称为short circuit reads 开启让HDFS推测性地从多个datanode读数据 ...

  6. Java传(1)

    ____________________________去告诉世界,我已经横空出世了! 你好丫,世界! public class HelloWorld{ public static void main ...

  7. Oracle 11G在用EXP 导入、导出时,若有空表对导入导出中遇到的问题的解决

    11G中有个新特性,当表无数据时,不分配segment,以节省空间 解决方法: 1.insert一行,再rollback就产生segment了. 该方法是在在空表中插入数据,再删除,则产生segmen ...

  8. Box/坐标/方向/Row

    1.Box, 我们在做design planning的第一步就是确定floorplan的box,也就是设计的区域.这个区域可以划分为三个边界,如下图所示: 上图中,按对应的颜色框框可以分为:Die B ...

  9. alert警告框点击确定后自动提交表单

    转载于  :https://zhidao.baidu.com/question/619375120140398412.html 在页面中有多个input type="text"的文 ...

  10. 【转载】Win7下如何使用GCC编译器

    转自:http://jingyan.baidu.com/article/c275f6bacc0126e33c756771.html 双击GCC安装包,mingw-get-setup.exe,点击Ins ...