1. 首页我们打看dreamweaver或其它编辑器，创建一个名为nav的导航菜单

    <div class="nav">

    <ul>

    <li><a href="#">栏目一</a></li>

    <li><a href="#">栏目二</a></li>

    <li><a href="#">栏目三</a></li>

    <li><a href="#">栏目四</a></li>

    <li><a href="#">栏目五</a></li>

    </ul>

    </div>

    如下图所示：

  2.  

    现在我们为nav添加样式,首先去掉默认的margin和padding，再去掉<ul>< li>标签的list-style样式和<a>标签的默认下划线。接下来再添加适当的样式（根据实际需要添加）进行美化，如一下样式：

    <style type="text/css">

    * { margin:0; padding:0;}

    ul, li { list-style:none;}

    a { text-decoration:none;}

    .nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}

    .nav ul li { float:left;}

    .nav ul li a { width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px solid #ccc; background:#eee; color:#666;}

    .nav ul li a:hover{ color:#f00; }

    </style>

    打开页面预览效果

  3.  

    像这样，一个菜单横向菜单就建好了，下来我们给栏目一，栏目二，栏目三，添加二级下拉菜单

    <div class="nav">

    <ul>

    <li><a href="#">栏目一</a>

    <ul>

    <li><a href="#">二级栏目</a></li>

    <li><a href="#">二级栏目</a></li>

    <li><a href="#">二级栏目</a></li>

    <li><a href="#">二级栏目</a></li>

    </ul>

    </li>

    <li><a href="#">栏目二</a>

    <ul>

    <li><a href="#">二级栏目</a></li>

    <li><a href="#">二级栏目</a></li>

    <li><a href="#">二级栏目</a></li>

    <li><a href="#">二级栏目</a></li>

    </ul>

    </li>

    <li><a href="#">栏目三</a>

    <ul>

    <li><a href="#">二级栏目</a></li>

    <li><a href="#">二级栏目</a></li>

    <li><a href="#">二级栏目</a></li>

    <li><a href="#">二级栏目</a></li>

    <li><a href="#">二级栏目</a></li>

    </ul>

    </li>

    <li><a href="#">栏目四</a></li>

    <li><a href="#">栏目五</a></li>

    </ul>

    </div>

  4.  

    添加完二级栏目后，现在我们开始添加css样式，首先给<li>标签下的<ul>标签添加相对定位，再去除之下<li>标签的做浮动样式，再适当修改<a>标签，如一下样式：

    .nav ul li ul { position:absolute;}

    .nav ul li ul li { float:none;}

    .nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}

    我们刷新页面预览下效果

  5.  

    接下来我们隐藏掉二级下来菜单，并给它添加鼠标滑动效果，使得当鼠标滑动到主栏目时，二级下来菜单显示，样式如下：

    .nav ul li ul { position:absolute; display:none;}

    .nav ul li ul li { float:none;}

    .nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}

    .nav ul li:hover ul{ display:block; }

    再次预览效果，如下图所示：

  6.  

    至此，横向二级下拉菜单就制作完成了，这里附加上全部代码，以方便各位朋友参考，感谢各位朋友的浏览。

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

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>横排二级下拉菜单</title>

    <style type="text/css">

    * { margin:0; padding:0;}

    ul, li { list-style:none;}

    a { text-decoration:none;}

    .nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}

    .nav ul li { float:left;}

    .nav ul li a { width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px solid #ccc; background:#eee; color:#666;}

    .nav ul li a:hover{ color:#f00; }

    .nav ul li ul { position:absolute; display:none;}

    .nav ul li ul li { float:none;}

    .nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}

    .nav ul li:hover ul{ display:block; }

    </style>

    </head>

    <body>

    <div class="nav">

    <ul>

    <li><a href="#">栏目一</a>

    <ul>

    <li><a href="#">二级栏目</a></li>

    <li><a href="#">二级栏目</a></li>

    <li><a href="#">二级栏目</a></li>

    <li><a href="#">二级栏目</a></li>

    </ul>

    </li>

    <li><a href="#">栏目二</a>

    <ul>

    <li><a href="#">二级栏目</a></li>

    <li><a href="#">二级栏目</a></li>

    <li><a href="#">二级栏目</a></li>

    <li><a href="#">二级栏目</a></li>

    </ul>

    </li>

    <li><a href="#">栏目三</a>

    <ul>

    <li><a href="#">二级栏目</a></li>

    <li><a href="#">二级栏目</a></li>

    <li><a href="#">二级栏目</a></li>

    <li><a href="#">二级栏目</a></li>

    <li><a href="#">二级栏目</a></li>

    </ul>

    </li>

    <li><a href="#">栏目四</a></li>

    <li><a href="#">栏目五</a></li>

    </ul>

    </div>

    </body>

    </html>

     

百度纯CSS生成菜单的更多相关文章

  1. day19—纯CSS实现菜单列表下框跟随效果

    转行学开发,代码100天——2018-04-04 今天看到一篇介绍利用CSS实现列表下跟随效果的设计文章,如下图,当鼠标滑过列表项时,要求该项内容下的黑色下边框线实现同方向的跟随移动. 其中,列表内容 ...

  2. 纯CSS多级菜单

    主要代码部分: /*新增的二级菜单部分*/ .menu ul ul { visibility:hidden;/*开始时是隐藏的*/ position:absolute; left:0px; top:3 ...

  3. 前端特效： 使用CSS生成的闪光照相机效果

    使用纯CSS生成的照相机效果, 相关CSS代码如下: .container { position: absolute; top: 50%; left: 50%; -webkit-transform: ...

  4. 纯CSS菜单样式，及其Shadow DOM，Json接口 实现

    先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 完整项目github链接:https://github.com/git-Code-Shelf/M ...

  5. 纯CSS实现二级下拉导航菜单

    这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...

  6. 支持多种浏览器的纯css下拉菜单

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

  7. 纯css实现鼠标感应弹出二级菜单

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

  8. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  9. 纯CSS打造可折叠树状菜单

    1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="s ...

随机推荐

  1. 【sping揭秘】16、@After（finally） 但是这个实在afterturning之前执行

    package cn.cutter.start.bean; import org.apache.commons.logging.Log; import org.apache.commons.loggi ...

  2. linux中一些简便的命令之wc

    wc命令是统计文本中的字符数.单词数以及文本行数的,具体参数如下: -l 统计文本中的行数 -w 统计文本中的单词数 -c/m 统计文本中的字符数 -L 统计文本中最长行的字符数 当然使用时也可以不带 ...

  3. linux中sed命令的使用

    sed命令是linux或者shell编程中常用的筛选.替换命令,如果能熟练使用sed则对经常使用的人来说在工作上是非常有帮助的 下面把sed主要的用法列出来(有错误的地方大家可以指正): p命令只打印 ...

  4. Java高并发之线程池详解

    线程池优势 在业务场景中, 如果一个对象创建销毁开销比较大, 那么此时建议池化对象进行管理. 例如线程, jdbc连接等等, 在高并发场景中, 如果可以复用之前销毁的对象, 那么系统效率将大大提升. ...

  5. Linux_CentOS-服务器搭建 <七>

    设置Linux下Mysql表名不区分大小写 对linux安装mysql不熟悉的(查看我那一系列的文章第一篇): http://www.cnblogs.com/Alandre/p/3365535.htm ...

  6. 从零开始学 Web 之 JavaScript（二）变量

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  7. 死锁排查的小窍门 --使用jdk自带管理工具jstack

    本文版权归 远方的风lyh和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 开发时间久了,难免会写出一些一些死锁的代码,自己明明调用该方法可该方法就是不执行.不进该方法.日志也不打 ...

  8. Spring Boot + Spring Cloud 构建微服务系统（七）：API服务网关（Zuul）

    技术背景 前面我们通过Ribbon或Feign实现了微服务之间的调用和负载均衡,那我们的各种微服务又要如何提供给外部应用调用呢. 当然,因为是REST API接口,外部客户端直接调用各个微服务是没有问 ...

  9. 逆向知识之CS辅助/外挂专题.2.实现CS1.6透视原理

    逆向知识之CS辅助/外挂专题.2.实现CS1.6透视原理 一丶透视简介 我们涉及到FPS游戏.免不了说透视.自瞄什么的. 在CS1.6中. 有OpenGl.也有D3D. 透视的方法很多. gl透视(也 ...

  10. JavaWeb学习 (十五)————JSP指令

    一.JSP指令简介 JSP指令(directive)是为JSP引擎而设计的,它们并不直接产生任何可见输出,而只是告诉引擎如何处理JSP页面中的其余部分. 在JSP 2.0规范中共定义了三个指令: pa ...