没有使用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. 参考：(Java Selenium)Element is not visible to clcik

    1.The element is not visible to click. Use Actions or JavascriptExecutor for making it to click. By ...

  2. ConsensusClusterPlus根据基因表达量对样品进行分类

    #http://www.ncbi.nlm.nih.gov/pmc/articles/PMC2881355/ 一致聚类方法,采用重抽样方法来验证聚类合理性. library(ALL)data(ALL)d ...

  3. Struts2拦截器初涉

    Struts2拦截器初涉 正在练习struts,本例是从一个pdf上摘抄的例子,那本pdf都不知道叫什么名字,不过感觉很适合初学者. 在这里要实现一个简单的拦截器"GreetingInter ...

  4. linux复习

    linux的特点           - 免费的/开源           - 支持多线程/多用户           - 安全性好           - 对内存和文件管理优越       关机命令 ...

  5. vim 简单配置

    在启动vim时,当前用户根目录下的.vimrc 文件会被自动读取,该文件可以包含一些设置甚至脚本,所以,一般情况下把.vimrc 文件创建在当前用户的根目录下比较方便,即:$vi ~/.vimrc,然 ...

  6. FTPS链接服务器

    一.首先登录ftp服务器:命令行 lftp user@ip  上传:put  下载: get 二. 关于FTP传输模式与传输的方式 众所周知,FTP传输有两种工作模式,Active Mode和Pass ...

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

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

  8. spring+mybatis

    ---恢复内容开始--- 使用SSM(Spring.SpringMVC和Mybatis)已经有三个多月了,项目在技术上已经没有什么难点了,基于现有的技术就可以实现想要的功能,当然肯定有很多可以改进的地 ...

  9. 【ros bug】rplidar.launch is neither a launch file in package...

    解决 :cd catkin_ws $ source devel/setup.bash

  10. Bitmap旋转方法

    最近在做一个ORC图片解析的功能,要求解析出数字 但是发现他解析只能解析横着的图片,然后我拍照的时候拍的是竖直照片,当然你也可以去旋转照相机的屏幕 但是我这里为了方便选择的是竖直拍出来 然后,旋转下咯 ...