• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式：
    1:搜索微信号（888888）
    2:扫描左侧二维码
  • 登录 立即注册
    • 切换风格
    快捷导航
    福建二哥 › 门户 › 查看主题

    使用HTML+CSS实现鼠标划过的二级菜单栏的示例

    发布者: 颖然780 | 发布时间: 2025-8-13 00:18| 查看数: 18| 评论数: 0|帖子模式

    本文介绍了使用HTML+CSS实现鼠标划过的二级菜单栏的示例，分享给大家，具体如下：
    先上效果图：
    1、鼠标没在上面

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

    3、鼠标放在二级菜单上

    代码：
    1. <html>
    2. <head>
    3.     <title>二级菜单测试</title>
    4.     <meta charset="utf-8">
    5.     <style type="text/css">

    7.     /*为了使菜单居中*/
    8.     body {
    9.         padding-top:100px;
    10.         text-align:center;
    11.     }
    12.    
    13.    
    14.     /* -------------菜单css代码----------begin---------- */
    15.     .menuDiv {
    16.         border: 2px solid #aac;
    17.         overflow: hidden;
    18.         display:inline-block;
    19.     }
    20.    
    21.     /* 去掉a标签的下划线 */
    22.     .menuDiv a {
    23.         text-decoration: none;
    24.     }
    25.    
    26.     /* 设置ul和li的样式 */
    27.     .menuDiv ul , .menuDiv li {
    28.         list-style: none;
    29.         margin: 0;
    30.         padding: 0;
    31.         float: left;
    32.     }
    33.    
    34.     /* 设置二级菜单绝对定位，并隐藏 */
    35.     .menuDiv > ul > li > ul {
    36.         position: absolute;
    37.         display: none;
    38.     }

    40.     /* 设置二级菜单的li的样式 */
    41.     .menuDiv > ul > li > ul > li {
    42.         float: none;
    43.     }
    44.   
    45.     /* 鼠标放在一级菜单上，显示二级菜单 */
    46.     .menuDiv > ul > li:hover ul {
    47.         display: block;
    48.     }

    50.     /* 一级菜单 */
    51.     .menuDiv > ul > li > a {
    52.         width: 120px;
    53.         line-height: 40px;
    54.         color: black;
    55.         background-color: #cfe;
    56.         text-align: center;
    57.         border-left: 1px solid #bbf;
    58.         display: block;
    59.     }
    60.    
    61.     /* 在一级菜单中，第一个不设置左边框 */
    62.     .menuDiv > ul > li:first-child > a {
    63.         border-left: none;
    64.     }

    66.     /* 在一级菜单中，鼠标放上去的样式 */
    67.     .menuDiv > ul > li > a:hover {
    68.         color: #f0f;
    69.         background-color: #bcf;
    70.     }

    72.     /* 二级菜单 */
    73.     .menuDiv > ul > li > ul > li > a {
    74.         width: 120px;
    75.         line-height: 36px;
    76.         color: #456;
    77.         background-color: #eff;
    78.         text-align: center;
    79.         border: 1px solid #ccc;
    80.         border-top: none;
    81.         display: block;
    82.     }
    83.    
    84.     /* 在二级菜单中，第一个设置顶边框 */
    85.     .menuDiv > ul > li > ul > li:first-child > a {
    86.         border-top: 1px solid #ccc;
    87.     }
    88.    
    89.     /* 在二级菜单中，鼠标放上去的样式 */
    90.     .menuDiv > ul > li > ul > li > a:hover {
    91.         color: #a4f;
    92.         background-color: #cdf;
    93.     }
    94.     /* -------------菜单css代码----------end---------- */
    95.    
    96.     </style>
    97. </head>
    98. <body>

    100.     <!-- -------菜单html代码---------begin------- -->
    101.     <div class="menuDiv">
    102.         <ul>
    103.             <li>
    104.                 <a href="#">菜单一</a>
    105.                 <ul>
    106.                     <li><a href="#">二级菜单</a></li>
    107.                     <li><a href="#">二级菜单</a></li>
    108.                     <li><a href="#">二级菜单</a></li>
    109.                 </ul>
    110.             </li>
    111.             <li>
    112.                 <a href="#">菜单二</a>
    113.                 <ul>
    114.                     <li><a href="#">二级菜单</a></li>
    115.                     <li><a href="#">二级菜单</a></li>
    116.                 </ul>
    117.             </li>
    118.             <li>
    119.                 <a href="#">菜单三</a>
    120.                 <ul>
    121.                     <li><a href="#">二级菜单</a></li>
    122.                     <li><a href="#">二级菜单</a></li>
    123.                     <li><a href="#">二级菜单</a></li>
    124.                     <li><a href="#">二级菜单</a></li>
    125.                     <li><a href="#">二级菜单</a></li>
    126.                 </ul>
    127.             </li>
    128.             <li>
    129.                 <a href="#">菜单四</a>
    130.             </li>
    131.             <li>
    132.                 <a href="#">菜单五</a>
    133.                 <ul>
    134.                     <li><a href="#">二级菜单</a></li>
    135.                     <li><a href="#">二级菜单</a></li>
    136.                     <li><a href="#">二级菜单</a></li>
    137.                 </ul>
    138.             </li>
    139.         </ul>
    140.     </div>
    141.     <!-- -------菜单html代码---------end------- -->
    142.    
    143. </body>
    144. </html>
    复制代码
    以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

    来源：互联网
    免责声明：如果侵犯了您的权益，请联系站长（1277306191@qq.com），我们会及时删除侵权内容，谢谢合作！

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×

    最新评论

    新人须知

    常见问题

    维权申诉

    关注微博

    扫描微信

    关于合作

    通讯联系

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表