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. Hadoop项目实战－用户行为分析之应用概述（三）

    1.概述 本课程的视频教程地址:<项目工程准备> 本节给大家分享的主题如下图所示: 下面我开始为大家分享今天的第三节的内容——<项目工程准备>,接下来开始分享今天的内容. 2. ...

  2. Java并发编程笔记之ThreadLocal内存泄漏探究

    使用 ThreadLocal 不当可能会导致内存泄露,是什么原因导致的内存泄漏呢? 我们首先看一个例子,代码如下: /** * Created by cong on 2018/7/14. */ pub ...

  3. Linux 服务器命令，持续更新……

    记录一下常用命令给自己备忘备查,会持续更新-- 一.查看和修改Linux的时间 1. 查看时间和日期,命令: date 2.设定时间和日期 例如:将系统日期修改成2020年2月14日12点的命令: d ...

  4. Failed to convert value of type 'java.lang.String' to required type 'java.time.LocalDate';

    springboot jdbc查询使用LocalDate报:Failed to convert value of type 'java.lang.String' to required type 'j ...

  5. RocketMQ的broker启动失败解决

    RocketMQ的broker用如下命令启动: nohup sh bin/mqbroker -n localhost:9876 & 使用jps查看,系统非常卡顿,broker的名字也未显示.使 ...

  6. KVM虚拟化原理与基础应用示例

    一.KVM简介 Kernel-based Virtual Machine的简称,是一个开源的系统虚拟化模块,自Linux 2.6.20之后集成在Linux的各个主要发行版本中.它使用Linux自身的调 ...

  7. EXTJS4 Grid Filter 插件的使用 与后台数据解析------Extjs 查询筛选功能的实现

    先汗一个,一个小功能又踢腾了一天.本来这个带Demo的,但是上面介绍的不是很详细.用的时候问题不大,主要问题在文件导入方面.以为这个插件的使用和其他的不一样. 1.首先是需要引入文件的位置:如图 需要 ...

  8. ASP .NET MVC HtmlHelper扩展——简化“列表控件”的绑定

    在众多表单元素中,有一类<select>元素用于绑定一组预定义列表.传统的ASP.NET Web Form中,它对应着一组重要的控件类型,即ListControl,我们经常用到DropDo ...

  9. [日常] C语言中指针变量

    CPU 访问内存时需要的是地址,而不是变量名和函数名!变量名和函数名只是地址的一种助记符,当源文件被编译和链接成可执行程序后,它们都会被替换成地址.编译和链接过程的一项重要任务就是找到这些名称所对应的 ...

  10. Jquery Ajax 调用后台并返回数据

    一.前台调用ajax并解析json对象. $.ajax({ url : '', type : 'POST', //GET data : '’, beforeSend : function(reques ...