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. Linux学习笔记之二————Linux系统的文件和目录

    一.Windows和Linux文件系统区别 1.在 windows 平台下,打开“计算机”,我们看到的是一个个的驱动器盘符: 每个驱动器都有自己的根目录结构,这样形成了多个树并列的情形,如图所示:  ...

  2. C#单元测试分享ppt

    单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证.对于单元测试中单元的含义,一般来说,要根据实际情况去判定其具体含义,如C语言中单元指一个函数,Java里单元指一个类, ...

  3. vc++开发安装程序实例

    前言 市面上有很多安装程序制作软件:但是,要实现个性化安装程序,还是自己动手来写一个更为妥当.本文介绍基本的安装程序制作的步骤. 安装程序界面: 安装程序可以分为几个功能点:1 资源的嵌入.释放.2 ...

  4. python 输出颜色与样式的方法

    上次遇到这个问题就想写下来,其实当时我也不怎么会,老师说这个东西不需要理解,只需要死记硬背,写的多了就记住了,所以今天搜集了几篇文章,加上自己的理解,写下了这篇python 输出颜色的样式与方法的文章 ...

  5. JavaWeb学习（二十二）———EL表达式

    一.EL表达式简介 EL 全名为Expression Language.EL主要作用: 1.获取数据 EL表达式主要用于替换JSP页面中的脚本表达式,以从各种类型的web域 中检索java对象.获取数 ...

  6. Linux问题杂谈

    1. 虚拟机 SSH 无法登录 1.1 问题1:未安装ssh服务端 ssh: connect to host 192.168.58.129 port 22: Connection refused 问题 ...

  7. 大话DI依赖注入+IOC控制反转（一） 之 定义

    转发时请注明原创作者及地址,否则追究责任.原创:alunchen 依赖注入与控制反转      依赖注入与控制反转是老生常谈的问题.一般面试也会面试到这种问题.网上很多很多这方面的资料,搜索出来一大堆 ...

  8. .Net实现微信公众平台开发接口（二） 之 “获取access_token”

    access_token是公众号的全局唯一票据,公众号调用各接口时都需使用access_token. 接口调用请求说明 http请求方式: GET https://api.weixin.qq.com/ ...

  9. T-SQL:函数大全（九）

    1.CONCAT函数 SELECT custid, country, region, city, country + N',' + region + N',' + city AS location F ...

  10. oracle与mysql（2）

    一.并发性 并发性是oltp数据库最重要的特性,但并发涉及到资源的获取.共享与锁定. mysql:mysql以表级锁为主,对资源锁定的粒度很大,如果一个session对一个表加锁时间过长,会让其他se ...