没有使用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. HDU 5775 Bubble Sort（冒泡排序）

    p.MsoNormal { margin: 0pt; margin-bottom: .0001pt; text-align: justify; font-family: Calibri; font-s ...

  2. FreeMarker常用语法

    转自:http://www.cnblogs.com/linjiqin/p/3388298.html FreeMarker的插值有如下两种类型:1,通用插值${expr};2,数字格式化插值:#{exp ...

  3. Codeforces Round #262 (Div. 2)

    A #include <iostream> #include<cstdio> #include<cstring> #include<algorithm> ...

  4. Spring事务管理只对出现运行期异常进行回滚

    原文:http://blog.csdn.net/abc19900828/article/details/39497631 使用spring难免要用到spring的事务管理,要用事务管理又会很自然的选择 ...

  5. iOS开发 弹簧效果

    #import "DDJelloView.h" #define SYS_DEVICE_WIDTH    ([[UIScreen mainScreen] bounds].size.w ...

  6. CBUUID UUIDString unrecognized selector sent to instance 错误

    CBUUID UUIDString unrecognized selector sent to instance 错误 ios7.0,4s 蓝牙出现上述错误! 查看api可知,错误原因,由于CBUUI ...

  7. DIV设置overflow无效的原因

    因为项目需求需要在一个div中添加多个checked 添加的时候使用了 <label><input type="checkbox" value="123 ...

  8. hdu 1532(最大流）

    Drainage Ditches Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  9. WinForm程序打包说明

    如果使用的是VS2013需要下载并安装 Microsoft Visual Studio 2013 Installer Projects 下载地址:https://visualstudiogallery ...

  10. [转载]MySQL将DateTime时间类型格式化

    DATE_FORMAT(date,format)  根据format字符串安排date值的格式.   select from_unixtime(time,'%Y-%m-%d %H:%i:%s');   ...