没有使用JavaScript控制二级菜单的显示，结果如上图所示。

代码如下：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>纯DIV+CSS制作二级横向弹出菜单</title>

 <style type="text/css">

     .menu{

         font-family:arial,sans-serif;

         /*width:750px;这里的宽度设置并不是必须的*/

         padding:;

         margin:50px;

     }

     .menu ul{

         padding:;

         margin:;

         /*ul和ol、li都有list-style-type属性，*/

         list-style-type:none;

     }

     .menu ul li{

     /*float属性定义元素在哪个方向浮动，浮动元素会生成一个块级框。如果浮动非替换元素，则要

     指明一个明确的宽度，否则会被尽可能的压缩。*/

         float:left;

         position:relative;

         list-style-type:none;

     }

     .menu ul li a, .menu ul li a:visited{

         /*display的值，none表示不被显示；block表示显示为块级元素，元素前后

         有换行符；inline为默认值，内联元素，前后没有换行符……*/

         display:block;

         text-align:center;

         text-decoration:none;

         width:104px;

         height:30px;

         color:#000;

         border-width:1px solid #fff;

         background:#c9c9a7;

         line-height:30px;

         font-size:11px;

     }

     /*鼠标无动作时不显示*/

     .menu ul li ul{

         display:none;

     }

     /*当鼠标指向第一级li时，第二级ul的动作*/

     .menu ul li:hover ul{

         display:block;

         position:absolute;

         top:30px;

         left:;

         width:105px;

     }

     .menu ul li:hover ul li a{

         display:block;

         background:#faeec7;

         color:#000;

     }

     .menu ul li:hover ul li a:hover{

         background:#dfc184;

         color:#000;

     }

     /*clear属性定义了元素的哪边上不允许出现浮动元素。*/

     .clear{

         clear:both;

     }

 </style>

 </head>

 <body>

 <div class="menu">

     <ul>

         <li><a class="hide" href="#">一级菜单</a>

             <ul>

                 <li><a href="#">二级菜单</a></li>

                 <li><a href="#">二级菜单</a></li>

                 <li><a href="#">二级菜单</a></li>

             </ul>

         </li>

         <li><a class="hide" href="#">一级菜单</a>

             <ul>

                 <li><a href="#">二级菜单</a></li>

                 <li><a href="#">二级菜单</a></li>

                 <li><a href="#">二级菜单</a></li>

             </ul>

         </li>

         <li><a class="hide" href="#">一级菜单</a>

             <ul>

                 <li><a href="#">二级菜单</a></li>

                 <li><a href="#">二级菜单</a></li>

                 <li><a href="#">二级菜单</a></li>

             </ul>

         </li>

         <li><a class="hide" href="#">一级菜单</a></li>

         <div class="clear"></div>

     </ul>

 </div>

 </body>

 </html>

DIV+CSS制作二级横向弹出菜单，略简单的更多相关文章

  1. 纯div+css制作的弹出菜单

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

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

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

  3. web标准(复习)--4 纵向导航菜单及二级弹出菜单

    今天我们开始学习纵向导航菜单及二级弹出菜单,包含以下内容和知识点: 纵向列表 标签的默认样式 css派生选择器 css选择器的分组 纵向二级列表 相对定位和绝对定位 一.纵向列表纵向列表或称为纵向导航 ...

  4. 个人练习：使用HTML+CSS制作二级菜单

    最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...

  5. Web标准：四、纵向导航菜单及二级弹出菜单

    Web标准:四.纵向导航菜单及二级弹出菜单 知识点: 1.纵向列表 2.标签的默认样式 3.css派生选择器 4.css选择器的分组 5.纵向二级列表 6.相对定位和绝对定位   1)纵向列表 可以看 ...

  6. css+html+js实现多级下拉和弹出菜单

    本文将使用css+html+js实现横向菜单.具有多级弹出菜单下拉. 首先我们来看看效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvajkwMzgy ...

  7. css模仿微信弹出菜单

      css模仿微信弹出菜单 效果图: html: <div class="action-sheet-backdrop"> <div class="act ...

  8. 下拉的DIV+CSS+JS二级树型菜单

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

  9. 布局分析002：入门级的CSS导航弹出菜单

    这种弹出菜单非常有意思,也有记录的意义,甚至可以说,掌握了这种弹出菜单,基本上CSS掌握的差不多. 主要涉及下面三个重要知识: CSS的继承性质. relative absolute定位. 子选择符& ...

随机推荐

  1. MVC区域使用

    新建项目 Main: 添加一个MVC5控制器并添加index视图:(HomeController) Views/Home/Index.cshtml内容: @{ Layout = null; } < ...

  2. GaugeControl 数字时钟，温度计，仪表盘

    https://documentation.devexpress.com/#WindowsForms/CustomDocument18217 This topic will guide you thr ...

  3. 从C语言快速学PHP

    PHP是解释性语言,是Web开发中常用的语言.对于web编程,建议学习时参考w3cschool的在线api手册. PHP和C语言及其相似,懂C的人只要稍加学习就能写出简单的PHP程序.以下是PHP与C ...

  4. iOS开发数据库篇—SQLite简单介绍

    iOS开发数据库篇—SQLite简单介绍 一.离线缓存 在项目开发中,通常都需要对数据进行离线缓存的处理,如新闻数据的离线缓存等. 说明:离线缓存一般都是把数据保存到项目的沙盒中.有以下几种方式 (1 ...

  5. Linux Shell 批量更换文件名或后缀名

    把下列所有.c的文件名修改为.cc rename .c .cc *.c

  6. 《BI项目笔记》创建多维数据集Cube（2）

    本节建立: 历年的初烟水分均值变化分析Cube:区域维度:地州,专县时间维度:年等级维度:大等级,小等级指标:水分均值 数据源视图: 数据处理: ) ) DELETE FROM T_QualMoist ...

  7. 解决 scroll() position:fixed 抖动、导航菜单固定头部(底部)跟随屏幕滚动

    一.导航栏或者页脚正常情况下固定在页面的相应位置,当页面滚动后,导航栏或者页脚固定在页面的顶部或者底部的情景 一般就是将该块的代码样式的position设置为fixed.固定在顶部的话,将top设置为 ...

  8. static代码块与{}代码块的比较

    第一个例子: public class StaticDemo { { System.out.println("{} 代码块"); } static{ System.out.prin ...

  9. Windows 7 封装与定制不完全教程

    Windows 7 封装与定制不完全教程 从定制Win7母盘到封装详细教程 手把手教你定制WIN7小母盘 Windows 7 封装与定制不完全教程 [教程] Windows 7 封装与定制不完全教程( ...

  10. LayoutInflater和inflate()

    LayoutInflater LayoutInflater抽象类是用来加载XML布局文件(UI界面)的. 作用: 1.对于一个没有被载入或者想要动态载入的界面,都需要使用LayoutInflater. ...