没有使用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. Bootstrap_标签

    一.标签 在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息,比如说在导航上添加了一个新导航项,可能就会加一个“new”标签,来告诉用户. 那么在Bootstrap框架中特意将这样的效果提 ...

  2. 【转】对硬盘进行分区时，GPT和MBR区别。

    在Windows 8或8.1中设置新磁盘时,系统会询问你是想要使用MBR还是GPT分区.GPT是一种新的标准,并在逐渐取代MBR. GPT带来了很多新特性,但MBR仍然拥有最好的兼容性.GPT并不是W ...

  3. 备用帖子1Shell（Shell R语言）

    shell========================== echo 1 > /proc/sys/vm/drop_caches 清理内存 free -m du -h --max-depth= ...

  4. Apache Solr 访问权限控制

    Current state of affairs SSL support was added in version 4.2 (SolrCloud v4.7). Protection of Zookee ...

  5. cocos2d学习笔记

    doxygen工具 生成cocos2d的api文档 位图字体编辑工具 Glyph Designer http://www.71squared.com/glyphdesigner  收费的 CCLabl ...

  6. Ubuntu快捷键

    https://linux.cn/article-3025-1.html 超级键操作 1.超级键(Win键)–打开dash. 2.长按超级键– 启动Launcher.并快捷键列表. 3.按住超级键,再 ...

  7. linux top命令

    top命令参数 -h:help表示显示帮助的意思 -v:version显示版本的意思,和-h的功能一样 -u:user显示指定用户的进程,例如:top -u root -p:pid显示指定进程,例如: ...

  8. Windows下安装postgresql_psycopg2时出现 "Unabled to find vcvarsall.bat" 的解决办法

    使用django时会用到postgresql的数据库,如下表: 数据库引擎设置 设置 数据库 适配器 postgresql PostgreSQL psycopg 版本 1.x, http://www. ...

  9. python3 登录接口

    登录接口 功能: 输入用户名(有一个用户名及对应的密码表) 认证成功后显示欢迎信息  输错三次后锁定(即第四次提示该账户已被锁定)用户登录锁定记录写到一个文件中. 用到:自定义函数.列表.字典 #Au ...

  10. Spring IoC原理详解

    去掌握一门技术的时候,往往很多人都忽略了一点,只是一味地去写代码,原理层面的东西从来就不理会 还有就是学习的过程中,不去想为什么有了当前的写法,却有着这么一门技术可以代替它 一般来说,在写程序的时候, ...