先上效果图：

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. 记一次很坑的python2与python3共存问题

    当添加PYTHONPATH环境变量时,无论输入pip2 -V还是pip3 -V都显示的是python2的环境变量,使用pip3 install 时也是安装在了python2的三方库(因为python2 ...

  2. win server 2012 R2 你需要先安装 对应于 KB2919355 的更新

    产生阻滞的问题: 你需要先安装 对应于 KB2919355 的更新 ,然后才可在 Windows 8.1 或 Windows Server 2012 R2 上安装此产品. 官方说法(这些 KB 必须按 ...

  3. Webpack vs Rollup

    本文由作者余伯贤授权网易云社区发布. 2017年4月份的时候,Facebook将React的构建工具换成了Rollup.很多人就有疑问了,Webpack不也是Facebook团队开发的吗,为什么不使用 ...

  4. “全栈2019”Java多线程第十二章：后台线程setDaemon()方法详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  5. BZOJ 1091--切割多边形(几何&枚举)

    1091: [SCOI2003]切割多边形 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 356  Solved: 157[Submit][Status ...

  6. [Objective-C语言教程]结构体（17）

    Objective-C数组可定义包含多个相同类型的数据项的变量类型,但结构体是Objective-C编程中的另一个用户定义数据类型,它可组合不同类型的数据项. 结构体用于表示记录,假设要图书馆中跟踪书 ...

  7. 获取指定订阅下所有Azure ARM虚拟机配置（CPU核数，内存大小，磁盘信息）的使用情况

    脚本内容: <# .SYNOPSIS This script grab all ARM VM VHD file in the subscription and caculate VHD size ...

  8. 解决pymysql.err.InternalError: (1366, "Incorrect string value: '\\xF0\\x9F\\x8C\\xB8' for column 'headline' at row 1")

    解决pymysql.err.InternalError: (1366, "Incorrect string value: '\\xF0\\x9F\\x8C\\xB8' for column ...

  9. 遇见Navicat 2003-can't connect to MYSQL server on 'localhost'（10061）

    学习过程中难免遇到问题,今天就遇到了Navicat 2003-can't connect to MYSQL server on 'localhost'(10061),navicat报错,我就纳闷以前都 ...

  10. Go语言指针

    指针简介 (Pointer)是编程语言中的一个对象,利用地址,它的值直接指向(points to)存在电脑存储器中另一个地方的值.由于通过地址能找到所需的变量单元,可以说,地址指向该变量单元.因此,将 ...