当前位置：Gxlcms > html代码 > 如何利用HTML做出鼠标划过的二级菜单栏（实例源码）

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

时间：2021-07-01 10:21:17 帮助过：29人阅读

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

先上效果图：

1、鼠标没在上面

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

3、鼠标放在二级菜单上

实例源码如下：

  1. <html>
  2. <head>
  3.     <title>二级菜单测试</title>
  4.     <meta charset="utf-8">
  5.     <style type="text/css">
  6.     /*为了使菜单居中*/
  7.     body {
  8.         padding-top:100px;
  9.         text-align:center; 
  10.     }
  11.     
  12.     
  13.     /* -------------菜单css代码----------begin---------- */
  14.     .menup { 
  15.         border: 2px solid #aac; 
  16.         overflow: hidden; 
  17.         display:inline-block;
  18.     }
  19.     
  20.     /* 去掉a标签的下划线 */
  21.     .menup a {
  22.         text-decoration: none;
  23.     }
  24.     
  25.     /* 设置ul和li的样式 */
  26.     .menup ul , .menup li {
  27.         list-style: none;
  28.         margin: 0;
  29.         padding: 0;
  30.         float: left;
  31.     } 
  32.     
  33.     /* 设置二级菜单绝对定位，并隐藏 */
  34.     .menup > ul > li > ul {
  35.         position: absolute;
  36.         display: none;
  37.     }
  38.     /* 设置二级菜单的li的样式 */
  39.     .menup > ul > li > ul > li {
  40.         float: none;
  41.     }
  42.   
  43.     /* 鼠标放在一级菜单上，显示二级菜单 */
  44.     .menup > ul > li:hover ul {
  45.         display: block;
  46.     }
  47.     /* 一级菜单 */
  48.     .menup > ul > li > a {
  49.         width: 120px;
  50.         line-height: 40px;
  51.         color: black;
  52.         background-color: #cfe;
  53.         text-align: center;
  54.         border-left: 1px solid #bbf;
  55.         display: block;
  56.     }
  57.     
  58.     /* 在一级菜单中，第一个不设置左边框 */
  59.     .menup > ul > li:first-child > a {
  60.         border-left: none;
  61.     }
  62.     /* 在一级菜单中，鼠标放上去的样式 */
  63.     .menup > ul > li > a:hover {
  64.         color: #f0f;
  65.         background-color: #bcf;
  66.     }
  67.     /* 二级菜单 */
  68.     .menup > ul > li > ul > li > a {
  69.         width: 120px;
  70.         line-height: 36px;
  71.         color: #456;
  72.         background-color: #eff;
  73.         text-align: center;
  74.         border: 1px solid #ccc;
  75.         border-top: none;
  76.         display: block;
  77.     }
  78.     
  79.     /* 在二级菜单中，第一个设置顶边框 */
  80.     .menup > ul > li > ul > li:first-child > a {
  81.         border-top: 1px solid #ccc;
  82.     }
  83.     
  84.     /* 在二级菜单中，鼠标放上去的样式 */
  85.     .menup > ul > li > ul > li > a:hover {
  86.         color: #a4f;
  87.         background-color: #cdf;
  88.     }
  89.     /* -------------菜单css代码----------end---------- */
  90.     
  91.     </style>
  92. </head>
  93. <body>
  94.     <!-- -------菜单html代码---------begin------- -->
  95.     <p class="menup">
  96.         <ul>
  97.             <li>
  98.                 <a href="#">菜单一</a>
  99.                 <ul>
  100.                     <li><a href="#">二级菜单</a></li>
  101.                     <li><a href="#">二级菜单</a></li>
  102.                     <li><a href="#">二级菜单</a></li>
  103.                 </ul>
  104.             </li> 
  105.             <li>
  106.                 <a href="#">菜单二</a>
  107.                 <ul>
  108.                     <li><a href="#">二级菜单</a></li>
  109.                     <li><a href="#">二级菜单</a></li>
  110.                 </ul>
  111.             </li> 
  112.             <li>
  113.                 <a href="#">菜单三</a>
  114.                 <ul>
  115.                     <li><a href="#">二级菜单</a></li>
  116.                     <li><a href="#">二级菜单</a></li>
  117.                     <li><a href="#">二级菜单</a></li>
  118.                     <li><a href="#">二级菜单</a></li>
  119.                     <li><a href="#">二级菜单</a></li>
  120.                 </ul>
  121.             </li> 
  122.             <li>
  123.                 <a href="#">菜单四</a>
  124.             </li> 
  125.             <li>
  126.                 <a href="#">菜单五</a>
  127.                 <ul>
  128.                     <li><a href="#">二级菜单</a></li>
  129.                     <li><a href="#">二级菜单</a></li>
  130.                     <li><a href="#">二级菜单</a></li>
  131.                 </ul>
  132.             </li> 
  133.         </ul>
  134.     </p>
  135.     <!-- -------菜单html代码---------end------- -->
  136.     
  137. </body>
  138. </html>

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

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！