html做下拉列表效果

最新推荐文章于 2025-01-03 21:12:12 发布

原创最新推荐文章于 2025-01-03 21:12:12 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

14 篇文章

订阅专栏

本文档展示了如何使用HTML和CSS创建具有下拉菜单的导航栏。代码包括了基本的HTML结构，如`<ul>`和`<li>`元素，以及CSS样式以实现阴影效果、固定顶部和响应式下拉列表。此示例适用于网页头部导航的设计。

html做下拉列表效果

文章目录

html做下拉列表效果

在这里插入图片描述

今天我们来实现一下这个界面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			body{
				margin: 0;
			}
			.clearfix {
			  overflow: auto;
			}
			.shadow_box{
				box-shadow: 0px 3px 10px 1px #888888;
			}
			.up-leader {
			  background-color: #333; 
			  list-style-type: none;
			  text-align: center;
			  position:sticky;
			  margin: 0;
			  padding: 0;
			}
			
			.up-leader li:not(.dropdown) {
			  display: inline-block;
			  font-size: 20px;
			  padding: 20px;
			}
			.up-leader li a, .dropbtn{
				display: inline-block;
				  color: white;
				  text-align: center;
				  padding: 14px 16px;
				  text-decoration: none;
			}
			.up-leader li.dropdown{
				display: inline-block;
				font-size: 20px;
			    padding: 20px;
			}
			.dropdown:hover {
				background-color: dodgerblue;
			}
			.dropdown-content {
			  display: none;
			  position: absolute;
			  background-color: #f9f9f9;
			  min-width: 160px;
			  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
			  z-index: 1;
			}
			
			div.dropdown-content a {
			  color:#000000;
			  padding: 12px 16px;
			  text-decoration: none;
			  display: block;
			  text-align: left;
			}
			.dropdown-content a:hover {background-color: #f1f1f1;}
			.dropdown:hover .dropdown-content {
			  display:block;
			}
			div.sticky{
				
				position: sticky;
				top: 0;
				
				background:azure;
				text-align: center;
				
				
			}
			.img1{
				float: left;
				clear:left;
				margin-left:100px;
				opacity: 0.8;
				overflow: auto;
				
			}
			
			.side-leader ul{
				list-style-type: 0;
				margin: 0;
				padding: 0;
				width: 7%;
				height: 100%;
				background-color:rgb(147, 171, 235) ;
				position:fixed;
				overflow: auto;
				border-radius: 25px;
				
				
			}
			
			.side-leader ul li a{
				display: block;
				color:#000;
				padding: 8px 16px;
				text-decoration: none;
				font-family:"黑体";
				
			}
			li:hover:not(.dropdown){
				background-color: #555;
				color: white;
				
			}
			
		</style>
		<title>XR官网</title>
	</head>
	
	
	<body>
		
		<div class=" clearfix shadow_box">
			<img class="img1" src="img/4.png" width="60px" height="60px "  />
			
		</div>
		<div class="sticky  ">
			<ul class="up-leader">
			  <li><a href="#home">Home</a></li>
			  <li><a href="#news">News</a></li>
			  <li><a href="#contact">Contact</a></li>
			  <li class="dropdown">
			  	<a class="dropbtn" href="index.html">Our World</a>
			  	 <div class="dropdown-content">
			        <a href="#">Link 1</a>
			      	<a href="#">Link 2</a>
			      	<a href="#">Link 3</a>
			    </div>
			  </li>
			</ul>

		</div>
		<div class=" side-leader ">
			<ul >
				<li><a href="index.html">核心科技</a></li>
				<li><a href="index.html">党政板块</a></li>
				<li><a href="index.html">经营情况</a></li>
				<li><a href="index.html">未来发展</a></li>
				<li><a href="index.html">联系我们</a></li>
			</ul>
		</div>
		<div style="padding-bottom: 2000px;"></div>
		
	</body>
</html>