先上效果图：

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. mysqldump的简单使用

    背景 需要搞mysql数据同步,从一台服务器把数据库同步到另外一台服务器上,如果折腾过的话,就知道有个这玩意--mysqldump,其实就是mysql自带的一个命令而已 操作步骤 1. 认识mysql ...

  2. 3-C#面向对象概念

    本篇博客对应视频讲解 回顾 前两篇博文带大家快速的感知一下使用C#编写程序是怎样的过程,能实现什么样的功能.同时也提到了面向对象的概念.本篇文章就是更加详细的去将面向对象编程中常见的概念进行示例说明, ...

  3. MVC页面移除HTTP Header中服务器信息

    默认情况下,每一个MVC请求的HTTP Header中都会包含着当前服务器的一些信息,出于安全还是性能还是处女座的强迫症等等,都想把这些信息移除掉,增加一些应用程序的神秘感,如下,默认情况下Chrom ...

  4. Android DatePicker / TimePicker 占空间太大的解决办法

    DatePicker 与 TimePicker 控件占用的空间是固定的,没有参数可以更改. 如果修改 length 和 width 属性,只会让控件被切割,显示将不完整.很多人说可以使用 scale ...

  5. H - Birthday Paradox （生日悖论）

    点击打开链接 Sometimes some mathematical results are hard to believe. One of the common problems is the bi ...

  6. SpringMVC--视图

    本章简介 视图(View)和视图解析器(ViewResolver)的工作流程: 当请求处理方法处理完请求之后,会返回String.ModelAndView或View对象,如return “succes ...

  7. Elasticsearch(八)【NEST高级客户端--分析器】

    分析 分析是将文本(如任何电子邮件的正文)转换为添加到反向索引中进行搜索的tokens或terms的过程. 分析由analyzer执行,分析器可以是内置分析器或每个索引定义的定制分析器. 书写分析器测 ...

  8. 【javascript】—— JS判断浏览器类型、操作系统

    navigator.userAgent : userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值. navigator.platform : platform ...

  9. 链路层寻址与 ARP

    一. MAC 地址 不是主机或路由器具有链路层地址,而是它们的适配器(即网络接口)具有链路层地址.因此,具有多个网络接口的主机或路由器将具有与之相关联的多个链路层地址. 然而,链路层交换机并不具有与它 ...

  10. django model改变后，同步数据库

    在使用django进行开发时,往往需要根据不同的需求对model进行更改.而这时候,python manage.py syncdb就不好使了. 目前有个很好的工具,是south,这个是专门用来更改mo ...