HTML三级菜单

最新推荐文章于 2025-03-13 11:31:34 发布

White_Poppy

最新推荐文章于 2025-03-13 11:31:34 发布

阅读量9k

点赞数 2

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/White_Poppy/article/details/83152058

版权

HTML 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用HTML和CSS实现一个具有多级下拉菜单效果的导航栏，包括菜单项的布局、响应式设计及交互效果。

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

html文件

<nav>
    <ul>
        <li><a href="#">菜单1</a></li>
        <li><a href="#">菜单2</a>
            <ul>
                <li><a href="#">菜单2-1</a></li>
                <li><a href="#">菜单2-2</a>
                    <ul>
                        <li><a href="#">菜单2-2-1</a></li>
                        <li><a href="#">菜单2-2-2</a></li>
                         <li><a href="#">菜单2-2-3</a></li>
                        <li><a href="#">菜单2-2-4</a></li>
                        
                    </ul>
                </li>
                <li><a href="#">菜单2-3</a>
                    <ul>
                        <li><a href="#">菜单3</a></li>
                        <li><a href="#">菜单4</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        
        <li><a href="#">Inspiration</a></li>
    </ul>
</nav>

css文件

 nav {     
  	height:50px;
	width:850px;	
	background:#eee;
	margin:0 auto;/*0 上下 auto 左右*/
	margin-top: 50px;
	margin-bottom:50px;
}
 
nav ul ul {
    display: none;   /*该元素不会显示*/
}
 
    nav ul li:hover > ul {   /* > 子菜单选择器 鼠标在li上的时候 改变子ul的display属性*/
        display: block;
    }
 
 
nav ul {
    list-style: none;  /*所有的列表属性*/
    position: relative; /*相对定位ul的位置*/
    
}
   
    nav ul li {
        width:250px;
		height:50px;
        float: left;  /*使竖向菜单变为横向菜单*/
    }
 
        nav ul li:hover {  
            background:#666;
            
        }
            nav ul li:hover a {
                color: #fff;
            }
         
        nav ul li a {
            display: block;  /*使a标签变成块状*/
            padding: 10px 40px; /*a标签左右的距离*/
			text-align:center;
            color:#CCC; 
            text-decoration: none; /*文本的属性*/
        }
             
         
    nav ul ul {
        background:#666;
        border-radius: 0px; padding: 0;
        position: absolute; /*定义子ul的位置*/
         top: 100%;  
    }
        nav ul ul li {
            float: none;  /*清楚子ul里面li标签的浮动*/
            border-top: 1px solid #6b727c; /*下拉菜单中的分割线*/
            border-bottom: 1px solid #575f6a; 
            position: relative;
        }
            nav ul ul li a {
                padding: 15px 40px;
                color: #333;
            }   
                nav ul ul li a:hover {
                    background: #333;
                }
         
    nav ul ul ul{
        position: absolute; 
		left: 100%; 
		top:0;
    }