如何利用HTML做出鼠标划过的二级菜单栏（实例源码）-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

如何利用HTML做出鼠标划过的二级菜单栏（实例源码）

本篇文章主要介绍了如何利用HTML做出鼠标划过的二级菜单栏（实例源码），对做网站很有帮助，需要的朋友可以参考下，并且把实例源码分享给大家，具体如下：

先上效果图：

1、鼠标没在上面

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

3、鼠标放在二级菜单上

实例源码如下：

<html><head>    <title>二级菜单测试</title>    <meta charset="utf-8">    <style type="text/css">    /*为了使菜单居中*/    body {        padding-top:100px;        text-align:center;     }            /* -------------菜单css代码----------begin---------- */    .menup {         border: 2px solid #aac;         overflow: hidden;         display:inline-block;    }        /* 去掉a标签的下划线 */    .menup a {        text-decoration: none;    }        /* 设置ul和li的样式 */    .menup ul , .menup li {        list-style: none;        margin: 0;        padding: 0;        float: left;    }         /* 设置二级菜单绝对定位，并隐藏 */    .menup > ul > li > ul {        position: absolute;        display: none;    }    /* 设置二级菜单的li的样式 */    .menup > ul > li > ul > li {        float: none;    }      /* 鼠标放在一级菜单上，显示二级菜单 */    .menup > ul > li:hover ul {        display: block;    }    /* 一级菜单 */    .menup > ul > li > a {        width: 120px;        line-height: 40px;        color: black;        background-color: #cfe;        text-align: center;        border-left: 1px solid #bbf;        display: block;    }        /* 在一级菜单中，第一个不设置左边框 */    .menup > ul > li:first-child > a {        border-left: none;    }    /* 在一级菜单中，鼠标放上去的样式 */    .menup > ul > li > a:hover {        color: #f0f;        background-color: #bcf;    }    /* 二级菜单 */    .menup > 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;    }        /* 在二级菜单中，第一个设置顶边框 */    .menup > ul > li > ul > li:first-child > a {        border-top: 1px solid #ccc;    }        /* 在二级菜单中，鼠标放上去的样式 */    .menup > ul > li > ul > li > a:hover {        color: #a4f;        background-color: #cdf;    }    /* -------------菜单css代码----------end---------- */        </style></head><body>    <!-- -------菜单html代码---------begin------- -->    <p class="menup">        <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>    </p>    <!-- -------菜单html代码---------end------- -->    </body></html>

登录后复制

以上就是对如何利用HTML做出鼠标划过的二级菜单栏（实例源码）的全部介绍，如果你想了解更多有关html教程，请关注9543建站博客。

以上就是如何利用HTML做出鼠标划过的二级菜单栏（实例源码）的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~