先上效果图：

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. awk中NF的使用

    统计机器中网络连接各个状态个数 netstat -a | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}'   一下子不明白$NF是什么意 ...

  2. JAVA 字符串编码转换

    /** * 字符串编码转换的实现方法 * @param str 待转换编码的字符串 * @param newCharset 目标编码 * @return * @throws UnsupportedEn ...

  3. JS 浏览器对象

    1.window对象 1.1 window对象 window对象是BOM的核心.window对象指当前的浏览器窗口 所有JavaScript全局对象 .函数以及变量均自动成为window对象的成员 全 ...

  4. ASP Session的功能的缺陷（进程外的Session）

    目前ASP的开发人员都正在使用Session这一强大的功能,但是在他们使用的过程中却发现了ASP Session有以下缺陷: 进程依赖性:ASP Session状态存于IIS的进程中,也就是ineti ...

  5. sharepoint 2013工具

    caml designer 2013 生成caml工具 http://camlbuilder.codeplex.com/ 设计工具 CamlDesigner2013 爬网工具 HtmlAgilityP ...

  6. PXE+Kickstart无人值守安装系统re

    PXE(Preboot Excute Environment)预启动执行环境,可以让计算机通过网络启动系统,主要用于无人值守安装系统中引导客户端主机安装Linux操作系统. 由于之前有过使用cobbl ...

  7. jquery中通过添加readonly或者disabled属性实现行为禁止 / 去除某个属性的方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. web站点启用https （二）

    接上篇内容 二．实际配置案例 实验案例:为web站点启用https 实验环境:seven公司有一个web站点,域名为www.seven.com,启用的身份验证方式是基本验证方式.随着业务发展想成为网上 ...

  9. javasript 的DOM 节点操作：创建，插入，删除，复制以及查找节点

    DOM 含义: DOM 是文档对象模型(Document Object Model) 是一种基于浏览器编程的一套API 接口,我W3C 出台推荐的标准.其赋予了JS 操作节点的能力,当网页被加载时,浏 ...

  10. Codeforces Round #517

    传送门 A. Cram Time 你有一本书,阅读第\(i\)页需要花费\(i\)的时间.你第一天有\(a\)的时间,第二天有\(b\)的时间,问你的总阅读页数的最大值. Input: 一行包含\(2 ...