您的位置 首页 html教程

如何利用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教程,请关注php中文网。

以上就是如何利用HTML做出鼠标划过的二级菜单栏(实例源码)的详细内容,更多请关注php中文网其它相关文章!

文章来源:火云技术网

文章标题:如何利用HTML做出鼠标划过的二级菜单栏(实例源码)

文章地址:https://www.pyhw.net/34440_%e5%a6%82%e4%bd%95%e5%88%a9%e7%94%a8html%e5%81%9a%e5%87%ba%e9%bc%a0%e6%a0%87%e5%88%92%e8%bf%87%e7%9a%84%e4%ba%8c%e7%ba%a7%e8%8f%9c%e5%8d%95%e6%a0%8f%ef%bc%88%e5%ae%9e%e4%be%8b%e6%ba%90%e7%a0%81.html

关于作者: 火云技术网

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图