CSS实现垂直和s水平下拉菜单

妖狐艹你老母 2022-07-13 12:54 157阅读 0赞

<!DOCTYPE html />
    <html>
    <head>
        <title>垂直下拉菜单</title>
        <style type="text/css">
            *{margin:0;padding:0;}
    		.ul1{
    			text-decoration: none;
    			list-style: none;
    			float: left;
    			margin: 30px 50px;
    		}
    		.ul1 li{
    			width: 50px;
    			position: relative;
    			padding-bottom: 10px;
    			border: 1px solid #adf;
    			/* float: left; */  /* 加上这个float时就是水平下拉菜单 */
    		}
    		.ul1 li a{
    			text-decoration: none;
    			color: #8bf;
    		}
    		.ul1 li ul{
    			display: none;
    			background-color: lightyellow;
    			color: #bfe;
    			border: 1px solid #3ab;
    			position: absolute;
    			left: 0px;
    			top: 100%;
    			z-index: 10;
    		}
    		.ul1 li ul li{
    			position: relative;
    			list-style-type: none;
    		}
    		.ul1 li:hover ul{
    			display: block;
    		}
        </style>
    </head>
    <body>
        <div>
        	<nav>
        		<ul class="ul1">
        			<li><a href="#">下拉1</a>
    					<ul>
    						<li><a href="#">内容1</a></li>
    						<li><a href="#">内容2</a></li>
    						<li><a href="#">内容3</a></li>
    					</ul>
        			</li>
        			<li><a href="#">下拉2</a>
    					<ul>
    						<li><a href="#">内容1</a></li>
    						<li><a href="#">内容2</a></li>
    						<li><a href="#">内容3</a></li>
    					</ul>
        			</li>
        			<li><a href="#">下拉3</a>
    						<ul>
    						<li><a href="#">内容1</a></li>
    						<li><a href="#">内容2</a></li>
    						<li><a href="#">内容3</a></li>
    					</ul>
        			</li>
        		</ul>
        	</nav>
        </div>
    </body>
    </html>

垂直下拉菜单：

![Center][]

水平下拉菜单：

![Center 1][]

[Center]: /images/20220713/805868adce5f498dbc7af9b16728b471.png
[Center 1]: /images/20220713/9866b4aea71f403999c1cd2dd0ba7f3b.png