css导航栏二级菜单写法

最新推荐文章于 2025-02-08 15:35:57 发布

恬静的男子

最新推荐文章于 2025-02-08 15:35:57 发布

阅读量6.2k

点赞数 1

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/a732894380/article/details/84033428

版权

本文详细介绍了如何使用CSS创建具有二级下拉菜单的导航栏，包括使用浮动、相对定位、display属性等技巧，实现鼠标悬停时展开子菜单的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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 {
        clear: both;
    }
  
    /* 鼠标放在一级菜单上，显示二级菜单 */
    .menuDiv > ul > li:hover ul {
        display: block;

最低0.47元/天解锁文章