先上效果图：

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. asp.net Frameset框架集的嵌套使用

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Frame.aspx.cs& ...

  2. java.lang.NoSuchMethodError: javax.servlet.ServletContext.getContextPath()Ljava/lang/String;

    问题描述:在eclipse3.7中启动tomcat6时一直出现这个错误, java.lang.NoSuchMethodError: javax.servlet.ServletContext.getCo ...

  3. 初探APT 攻击

    作者:joe       所属团队:Arctic Shell 本文编写参考: https://www.freebuf.com/vuls/175280.html https://www.freebuf. ...

  4. mxonline实战11，课程详情页2，课程章节页

    对应github地址:第11天   一. 课程详情页2   1. 课程详情页第2块中的课程介绍中,修改course-detail.html中代码,搜索课程详情,找到如下代码

  5. AWS 推出长期支持的 OpenJDK 免费分发版本 —— Amazon Corretto

    简评:听说 Oracle JDK 要收费了,Oracle 要限制 Java 的商业或生产用途,针对这个问题,AWS 将会推出 Amazon Corretto. Java 是 AWS 用户使用的最流行的 ...

  6. python 第一天学习(画个正方体)

    import turtleturtle.goto(200,0)turtle.goto(200,200)turtle.goto(0,200)turtle.goto(0,0)turtle.penup()t ...

  7. QuantLib 金融计算——数学工具之插值

    目录 QuantLib 金融计算--数学工具之插值 概述 一维插值方法 二维插值方法 如果未做特别说明,文中的程序都是 Python3 代码. QuantLib 金融计算--数学工具之插值 载入模块 ...

  8. Eclipse 的SVN 插件

    Eclipse 的SVN 插件 简介  Subversive Eclipse 团队开发的SVN 插件. Subclipse Apache 的SVN 团队开发的Eclipse 插件.   Subvers ...

  9. 彻底理解JDK异步

    学而时习之,不亦说乎!                              --<论语> 首发,转载请附原文链接,谢谢. 原文使用MD格式编写,复制进来代码缩成一团了,读者见谅,需要 ...

  10. archlinux中gedit乱码的解决方法

    转自https://blog.csdn.net/oFAITH12345/article/details/24962545 例如:gedit key.c --encoding=GB18030 打开文件后 ...