没有使用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. C++11 图说VS2013下的引用叠加规则和模板参数类型推导规则

    背景:    最近在学习C++STL,出于偶然,在C++Reference上看到了vector下的emplace_back函数,不想由此引发了一系列的“探索”,于是就有了现在这篇博文. 前言:     ...

  2. [转]（四）unity4.6Ugui中文教程文档-------概要-UGUI Visual Components

    转自孙广东.   转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unitymanual ...

  3. 进程、线程、socket套接字-资源大小 & 切换代价

    另,进程 & 线程的很多知识可以看这里:http://www.cnblogs.com/charlesblc/p/6135666.html 今天查了一下进程和线程的资源占用. 比如问:栈和堆的大 ...

  4. 初试 Matlab 之去除水印

    这几天很痛苦地去学习了下用 Matlab 来处理图像,其实那些算法我觉得还不算很难理解,可是 Matlab 这种反人类的语法(可能对于我来说是这样吧,毕竟熟悉了 C++ / Java 的语法一时间很难 ...

  5. Error: Cannot find a valid baseurl for repo: base

    解决方法如下(修改dns配置) vi /etc/resolv.conf 在此文件最后加入:nameserver 8.8.8.8 如果没有vi编辑器可用: echo "nameserver 8 ...

  6. 课时8—弹窗modal

    首先弹窗的实现效果如下: 主要实现的代码如下: CSS: .header,.footer,.wrap-page{ position:absolute; left:; right:; backgroun ...

  7. ubuntu忘记密码怎么办

    刚安装了,ubuntu14.04,就想着,如果忘记登录密码,这可不好办,所以测试下开机,刚过bios显示画面,不停的点击,,键盘左边的shift键.(因为刚开始是采用按着不放的办法,结果不灵.所以我不 ...

  8. Xshell 登录 AWS CentOS 出现“所选择的用户秘钥未在远程主机上注册“，最终解决办法！

     其实就是 登录用户名错了,是 root,不是centos 也不是 ec2-user !  Xshell 连接配置界面如下 最重要是 登录授权配置 最后,登录成功! 就这么简单

  9. 10月9日Android学习笔记：活动与服务之间的通信

    最近在照着<第一行代码>这本书来学安卓,顺便记下笔记.主要的内容是Android中服务的第二种启动方式,通过活动绑定服务来启动服务,实现活动与服务之间的通信. 一. 首先创建一个服务类 p ...

  10. easyui-textbox 和 easyui-validatebox 设置值和获取值

    表单作如下定义:该input使用easyui的"easyui-textbox" <input id="addSnumber" style="wi ...