帮我写一个好看的html自适应导航菜单栏模板

以下是一个简单的自适应导航菜单栏模板，你可以根据自己的需要进行修改和美化。
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>自适应导航菜单栏模板</title>
	<style>
		body {
			padding: 0;
			margin: 0;
			font-family: Arial, sans-serif;
		}
		
		/* 导航菜单栏外框 */
		.navbar {
			background-color: #333;
			overflow: hidden;
			position: fixed;
			top: 0;
			width: 100%;
		}
		
		/* 导航菜单栏链接 */
		.navbar a {
			float: left;
			display: block;
			color: white;
			text-align: center;
			padding: 14px 16px;
			text-decoration: none;
			font-size: 17px;
		}
		
		/* 右侧下拉菜单 */
		.dropdown {
			float: right;
			display: none;
			position: relative;
		}
		
		.dropdown-content {
			display: none;
			position: absolute;
			background-color: #f9f9f9;
			min-width: 160px;
			z-index: 1;
		}
		
		.dropdown:hover .dropdown-content {
			display: block;
		}
		
		/* 下拉菜单链接 */
		.dropdown-content a {
			float: none;
			display: block;
			text-align: left;
			padding: 12px 16px;
			text-decoration: none;
			color: #333;
			font-size: 16px;
		}
		
		/* 当屏幕宽度小于 768px 时，隐藏导航菜单栏链接并显示下拉菜单图标 */
		@media screen and (max-width: 768px) {
			.navbar a:not(:first-child), .dropdown {
				display: none;
			}
			.navbar a.icon {
				float: right;
				display: block;
			}
		}
		
		/* 下拉菜单图标 */
		.icon {
			display: none;
			position: absolute;
			top: 0;
			right: 0;
			padding: 14px 16px;
			color: white;
			font-size: 17px;
			cursor: pointer;
		}
		
		/* 当屏幕宽度小于 768px 时，显示下拉菜单图标 */
		@media screen and (max-width: 768px) {
			.icon {
				display: block;
			}
		}
		
		/* 当下拉菜单显示时，改变图标颜色 */
		.icon.active {
			color: #fff;
		}
		
		/* 下拉菜单显示时，显示链接 */
		.responsive {
			display: none;
			position: relative;
		}
		
		.responsive a {
			float: none;
			display: block;
			text-align: left;
			padding: 12px 16px;
			text-decoration: none;
			color: #333;
			font-size: 16px;
		}
		
		/* 当屏幕宽度小于 768px 时，显示下拉菜单链接 */
		@media screen and (max-width: 768px) {
			.responsive {
				display: block;
			}
			.responsive a {
				float: none;
			}
		}
	</style>
</head>
<body>

	<!-- 导航菜单栏 -->
	<div class="navbar">
		<a href="#">首页</a>
		<a href="#">关于我们</a>
		<a href="#">服务项目</a>
		<a href="#">联系我们</a>
		<div class="dropdown">
			<a href="#">更多</a>
			<div class="dropdown-content">
				<a href="#">新闻动态</a>
				<a href="#">加入我们</a>
				<a href="#">客户案例</a>
			</div>
		</div>
		<a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
	</div>

	<!-- 下拉菜单 -->
	<div class="responsive" id="myLinks">
		<a href="#">首页</a>
		<a href="#">关于我们</a>
		<a href="#">服务项目</a>
		<a href="#">联系我们</a>
		<div class="dropdown">
			<a href="#">更多</a>
			<div class="dropdown-content">
				<a href="#">新闻动态</a>
				<a href="#">加入我们</a>
				<a href="#">客户案例</a>
			</div>
		</div>
	</div>

	<script>
		/* 点击下拉菜单图标时触发事件 */
		function myFunction() {
			var x = document.getElementById("myLinks");
			if (x.style.display === "block") {
				x.style.display = "none";
				document.querySelector(".icon").classList.remove("active");
			} else {
				x.style.display = "block";
				document.querySelector(".icon").classList.add("active");
			}
		}
	</script>

</body>
</html>
这个模板会自适应不同屏幕宽度，当屏幕宽度小于 768px 时，会隐藏导航菜单栏链接并显示下拉菜单图标。点击图标后，下拉菜单链接会显示出来。