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. iOS之Settings.Bundle的应用

    Settings.Bundle Settings.Bundle支持六种配置项分别是:Title,MultiValue,Group,Slider,ToggleSwitch,TextField . Tit ...

  2. MLlib之LR算法源码学习

    /** * :: DeveloperApi :: * GeneralizedLinearModel (GLM) represents a model trained using * Generaliz ...

  3. [git与github]__git与github简单了解

    前言 关于版本控制,版本控制是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统. 我们通过版本控制系统可以解决的问题:可以非常方便的查看我们的源码文件的历代更新版本.或将我们的项目源 ...

  4. 从零开始学 Web 之 JavaScript 高级（一）原型，贪吃蛇案例

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. System.Action的使用（lambda 表达式）

    对于Action的使用方法使用如下: namespace ConsoleApp1 { class Program { static void Main(string[] args) { string ...

  6. github总结(2)--怎样在github上面创建新的分支

    part I:添加新的分支步骤分解 第一步:git branch 查看当前分支情况 git branch //查看当前分支情况 第二步:git branch 分支名,新建一个自己的分支 git bra ...

  7. 【Flask-RESTPlus系列】Flask-RESTPlus系列译文开篇

    0x00 背景介绍 因为工作上的需要,最近开始研究Python中实现Restful API的框架和工具包.之前粗略学习过Flask,由于它比较轻量级,感觉用它来实现Restful API再适合不过了. ...

  8. Linux中配置别名

    Linux中修改配置别名 ####用到的命令: alias是用来查看系统中有什么别名 source 让配置生效 临时取消别名的方法 unalias 临时取消别名 \cp /mnt/test.txt / ...

  9. HTML 中获取现在时间，实时时间获取

    JavaScript   Date 对象 Date 对象用于处理日期与实际. 创建 Date 对象: var now  =  new Date(). 方法 描述 getDate() 从 Date 对象 ...

  10. oracle与mysql（2）

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