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. C# 算法之链表、双向链表以及正向反向遍历实现

    1.简介 链表是一种非常基础的数据结构之一,我们在日常开发种都会接触到或者是接触到相同类型的链表数据结构.所以本文会使用C#算法来实现一个简单的链表数据结构,并实现其中几个简单的api以供使用. 2. ...

  2. redis-cluster无备节点，安装脚本

    #!/bin/bash #安装gcc yum -y install gcc #安装RVM所需的程序包 yum -y install gcc-c++ patch readline readline-de ...

  3. salesforce lightning零基础学习(十) Aura Js 浅谈三: $A、Action、Util篇

    前两篇分别介绍了Component类以及Event类,此篇将会说一下 $A , Action以及 Util.  一. Action Action类通常用于和apex后台交互,设置参数,调用后台以及对结 ...

  4. winform 窗体关闭枚举类

    switch (e.CloseReason) { case CloseReason.None: break; case CloseReason.WindowsShutDown: break; case ...

  5. java使用java.lang.management监视和管理 Java 虚拟机

    ClassLoadingMXBean 用于 Java 虚拟机的类加载系统的管理接口. CompilationMXBean 用于 Java 虚拟机的编译系统的管理接口. GarbageCollector ...

  6. TensorFlow学习笔记(1)：variable与get_variable, name_scope()和variable_scope()

    Variable tensorflow中有两个关于variable的op,tf.Variable()与tf.get_variable()下面介绍这两个的区别 使用tf.Variable时,如果检测到命 ...

  7. array与xml转换实现(转)

    <?php function xml_encode($data, $charset = 'utf-8', $root = 'so') { $xml = '<?xml version=&qu ...

  8. Python pandas学习总结

    本来打算学习pandas模块,并写一个博客记录一下自己的学习,但是不知道怎么了,最近好像有点急功近利,就想把别人的东西复制过来,当心沉下来,自己自觉地将原本写满的pandas学习笔记删除了,这次打算写 ...

  9. ssh采用expect实现自动输入密码登录、拷贝

    1. 引言 最近做了一个项目,需要频繁与另一台主机进行文件的传输:中间想到了很多方式:FTP.samba.curl等,但是还是感觉scp最好用. SCP使用教程可参阅:http://www.jb51. ...

  10. vuex学习及使用

    什么是vuex? 在SPA单页面组件的开发中vuex称为状态管理:简单的理解就是你在state中定义了一个数据之后,你可以在所在项目中的任何一个组件里进行获取.进行修改,并且你的修改可以得到全局的响应 ...