CSS实现二级菜单

最新推荐文章于 2023-04-21 16:50:43 发布

花落(→)凋谢

最新推荐文章于 2023-04-21 16:50:43 发布

阅读量408

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/qq_41605893/article/details/109540310

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

请添加图片描述

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			nav {
    			margin: 100px auto; 
    			text-align: center;
				}
 
			nav ul ul {
    			display: none;
				}
 
   			 nav ul li:hover > ul {
        		display: block;
    		}
			nav ul {
    			background: #efefef; 
                /*background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); */  /*背景颜色*/
                /*box-shadow: 0px 0px 9px rgba(0,0,0,0.15);*/   /*背景阴影*/
                padding: 0 20px;
                border-radius: 10px;  
    			list-style: none;
   			    position: relative;
    			display: inline-table;
				}
    			nav ul:after {
        			content: ""; 
        			clear: both; 
        			display: block;
    			}
 
    			nav ul li {
        			float: left;
    			}
        		nav ul li:hover {
            		background: #4b545f;
                    /*background: -webkit-gradient(linear, 0 0, 0 100%, from(#4f5964), color-stop(0.4, #5f6975));*/
                    /*background: -webkit-linear-gradient(#4f5964 0%, #5f6975 40%);*/
                    /*background: -moz-linear-gradient(#4f5964 0%, #5f6975 40%);*/
                    /*background: -o-linear-gradient(#4f5964 0%, #5f6975 40%);*/
                    /*background: linear-gradient(#4f5964 0%, #5f6975 40%);*/
        		}
            	nav ul li:hover a {
                color: #fff;
            	}
        		nav ul li a {
            		display: block; 
            		padding: 25px 40px;
            		color: #757575; 
            		text-decoration: none;
        		}      
    			nav ul ul {
        			background: #5f6975; 
        			border-radius: 0px; /* 去圆角*/
        			padding: 0;
        			position: absolute; 
        			top: 100%;
    			}
        		nav ul ul li {
            		float: none; 
            		border-top: 1px solid #6b727c;
            		border-bottom: 1px solid #575f6a; 
            		position: relative;
        		}
            	nav ul ul li a {
                	padding: 15px 40px;
                	color: #fff;
            	}   
                nav ul ul li a:hover {
                    background: #4b545f;
                }
         
    			nav ul ul ul {
        			position: absolute; 
        			left: 100%; 
        			top:0;
    			}
		</style>
	</head>
	<body>
		<nav>
    		<ul>
        		<li><a href="#">一线城市</a></li>
        		<li><a href="#">一线城市</a>
            		<ul>
                		<li><a href="#">二线城市</a></li>
                		<li><a href="#">二线城市</a></li>
                		<li><a href="#">二线城市</a>
                    		<ul>
                        		<li><a href="#">HTML</a></li>
                        		<li><a href="#">CSS</a></li>
                    		</ul>
                		</li>
            		</ul>
        		</li>
        		<li><a href="#">一线城市</a>
            		<ul>
                		<li><a href="#">二线城市</a></li>
                		<li><a href="#">二线城市</a></li>
            		</ul>
        		</li>
        		<li><a href="#">一线城市</a></li>
    		</ul>
		</nav>
	</body>
</html>

花落(→)凋谢

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS实现二级菜单

完整代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> nav { margin: 100px auto; text-align: center; } nav ul ul { display: none; } ..
复制链接

扫一扫

专栏目录