先上效果图：

1、鼠标没在上面

2、鼠标放在一级菜单上，展开二级菜单

3、鼠标放在二级菜单上

代码： (点击此处预览代码效果)

<html>

<head>

    <title>二级菜单测试</title>

    <meta charset="utf-8">

    <style type="text/css">

    /*为了使菜单居中*/

    body {

        padding-top:100px;

        text-align:center;

    }

    /* -------------菜单css代码----------begin---------- */

    .menuDiv {

        border: 2px solid #aac;

        overflow: hidden;

        display:inline-block;

    }

    /* 去掉a标签的下划线 */

    .menuDiv a {

        text-decoration: none;

    }

    /* 设置ul和li的样式 */

    .menuDiv ul , .menuDiv li {

        list-style: none;

        margin: 0;

        padding: 0;

        float: left;

    } 

    /* 设置二级菜单绝对定位，并隐藏 */

    .menuDiv > ul > li > ul {

        position: absolute;

        display: none;

    }

    /* 设置二级菜单的li的样式 */

    .menuDiv > ul > li > ul > li {

        float: none;

    }

    /* 鼠标放在一级菜单上，显示二级菜单 */

    .menuDiv > ul > li:hover ul {

        display: block;

    }

    /* 一级菜单 */

    .menuDiv > ul > li > a {

        width: 120px;

        line-height: 40px;

        color: black;

        background-color: #cfe;

        text-align: center;

        border-left: 1px solid #bbf;

        display: block;

    }

    /* 在一级菜单中，第一个不设置左边框 */

    .menuDiv > ul > li:first-child > a {

        border-left: none;

    }

    /* 在一级菜单中，鼠标放上去的样式 */

    .menuDiv > ul > li > a:hover {

        color: #f0f;

        background-color: #bcf;

    }

    /* 二级菜单 */

    .menuDiv > ul > li > ul > li > a {

        width: 120px;

        line-height: 36px;

        color: #456;

        background-color: #eff;

        text-align: center;

        border: 1px solid #ccc;

        border-top: none;

        display: block;

    }

    /* 在二级菜单中，第一个设置顶边框 */

    .menuDiv > ul > li > ul > li:first-child > a {

        border-top: 1px solid #ccc;

    }

    /* 在二级菜单中，鼠标放上去的样式 */

    .menuDiv > ul > li > ul > li > a:hover {

        color: #a4f;

        background-color: #cdf;

    }

    /* -------------菜单css代码----------end---------- */

    </style>

</head>

<body>

    <!-- -------菜单html代码---------begin------- -->

    <div class="menuDiv">

        <ul>

            <li>

                <a href="#">菜单一</a>

                <ul>

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

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

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

                </ul>

            </li>

            <li>

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

                <ul>

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

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

                </ul>

            </li>

            <li>

                <a href="#">菜单三</a>

                <ul>

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

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

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

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

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

                </ul>

            </li>

            <li>

                <a href="#">菜单四</a>

            </li>

            <li>

                <a href="#">菜单五</a>

                <ul>

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

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

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

                </ul>

            </li>

        </ul>

    </div>

    <!-- -------菜单html代码---------end------- -->

</body>

</html>

使用HTML+CSS实现鼠标划过的二级菜单栏的更多相关文章

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

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

  2. CSS样式--移动划过超链接鼠标变手型详解

    用css控制鼠标样式的语法如下:<span style="cursor:*">文本或其它页面元素</span>把 * 换成如下15个效果的一种: 下面是对这 ...

  3. 鼠标划过用户名时在鼠标右下角显示div展示用户资料

    最近做一个网站论坛,为了方便会员之间相互了解,又不想再做一个页面展示用户资料,就想到了鼠标划过用户名时在鼠标右下角显示div展示用户资料这个效果, 这里要注意的该方法不是给每个用户名的旁边都绑定一个d ...

  4. 鼠标划过图片title 提示实现

    鼠标划过图片title 提示实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  5. JavaScript总结之鼠标划过弹出div单击出现对话框

    为了满足他们的永无止境的要求,我可谓是任劳任怨啊,累断了双手,看瞎了双眼.这个是来写鼠标划过一个按钮,然后弹出一个小提示框解释,另外根据radio是否选中,判断点击后如何执行,然后执行之后再有一个确认 ...

  6. easyui toopTip，鼠标划过悬浮，显示一个小提示框的方法

    easyui toopTip,鼠标划过悬浮,显示一个小提示框的方法 /*easyui,鼠标划过悬浮,显示一个小提示框的方法*/ function toopTip(idOrClass,showText) ...

  7. jQuery实现鼠标划过展示大图的方法

    这篇文章主要介绍了jQuery实现鼠标划过展示大图的方法,实例分析了jQuery操作鼠标事件及图片处理的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jQuery实现鼠标划过展示大图 ...

  8. css实现鼠标悬浮后的提示效果

    一.概述 很多时候网站中需要在鼠标划过小图标时,悬浮出提示性的文字.比如下图: 鼠标悬浮后的效果 这种效果可以使用css中的伪类hover来实现.但有时候搞不清两个元素的嵌套关系.使用了hover却没 ...

  9. css禁用鼠标点击事件

    css禁用鼠标点击事件 .disabled { pointer-events: none; } <div class="main-container disabled"> ...

随机推荐

  1. [C#]C#中ToString()和Convert.ToString()的区别

    一.一般用法说明 ToString()是Object的扩展方法,所以都有ToString()方法;而Convert.ToString(param)(其中param参数的数据类型可以是各种基本数据类型, ...

  2. jdk-7u40-windows-i586的安装

    1.预备知识: i586 指的是windows 32bit版本 Oracle.微软.IBM这些大佬们最“贵族”了-----他们都很喜欢 C盘 2.关键 JDK必须装在C盘目录下,才能在命令行下正确运行 ...

  3. dockerfile 构建tomcat

    事先下载好tomcat和jdk的二进制包. 下载地址https://pan.baidu.com/s/1kWWHGEV 值得一说的是 tomcat的官方镜像 剪切了很多jdk和系统命令,所以生产环境建议 ...

  4. c++实验5 顺序/链式队列

    链式队列及循环队列 1.循环队列的实现(请采用模板类及模板函数实现) [实现提示] 同时可参见教材p65-p67页的ADT描述及算法实现及ppt)函数.类名称等可自定义,部分变量请加上学号后3位.也可 ...

  5. sql server中的 trimtrailingblanks

    使用sp_help 查出 发现有个这个属性, 如何修改呢? SET ANSI_PADDING ONAlter Table Sys_users_History Alter   column PveSit ...

  6. 【12c OCP】CUUG OCP认证071考试原题解析（33）

    33.choose the best answer View the Exhibit and examine the structure of the ORDER_ITEMS table. Exami ...

  7. docker-ce的安装以及卸载

    注意:以下命令无特殊说明外均在root用户下执行 一.Docker CE的安装 1. 首先,卸载老旧的docker. yum remove docker \ docker-client \ docke ...

  8. Code Chef IMPO（计算几何+扫描线+积分）

    题面 传送门 前置芝士 扫描线,积分求面积 题解 我怎么老是忘了积分可以求面积-- 首先,这两个投影的最小的\(x\)坐标和最大的\(x\)坐标必须相等,否则肯定无解 我们考虑一种方法,枚举\(x\) ...

  9. WiFi安全那些事儿，整理推荐~

    即使你安装了防火墙,不连接任何WIFI和热点,不在任何不受信任的网站下载东西,及时清理缓存和个人敏感信息,你相信吗?你的个人隐私仍然可能被泄露出去! 基础篇: 推荐1  谁出卖了你  << ...

  10. jmeter我们必须搞清楚的问题

    我们从以下几个点来看jmeter: 1.jmeter是什么? 2.jmeter为什么我们要使用jmeter?他可以帮我们解决那些事情? 3.怎样使用jmeter做这些事情? 4.我们在什么时候会使用j ...