好看的网站首页，顶部多层导航

之前有做过一个侧边多层导航， 原本觉得还不错，但是用着用着感觉不太方便，就把它改了改，变成了现在这样的

先说一下功能吧，当鼠标悬浮导航栏是，会显示对应导航栏下的内容，可以根据需求放入链接或者方法。当导航栏下内容超出页面时，会出现美化过的滚动条。背景图片和导航栏背景色可以根据喜好自己更改。

对了，图片里的网站链接我没放进去，是一些挺好用的网站，如果要的话可以在下面评论区说一下。

好了，开始写代码

第一步，HTML代码

       
		<script src="js/jquery-3.4.1.min.js"></script>		
        <div id="navigate">
			<ul>
				<li class="labels labels_1">
					<p id="labels_1" >搜索</p>
					<div class="tab  one">
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
					</div>
				</li>
				<li class="labels labels_2">
					<p id="labels_2" >工作</p>
					<div class="tab  two">
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
					</div>
				</li>
				<li class="labels labels_3">
					<p id="labels_3" >学习</p>
					<div class="tab  three">
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
					</div>
				</li>
				<li class="labels labels_4">
					<p id="labels_4" >娱乐</p>
					<div class="tab  four">
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
						<p><a href="#" target="_blank">名字</a></p>	
					</div>
				</li>
				
			</ul>
		</div>

第二步，为HTML设置样式

	
		*{
			margin: 0;
			padding: 0;
			list-style: none;
			text-decoration: none;
			color: white;
			text-align: center;
		}
		body{
			min-height: 100vh;
            /*背景图片路径*/
			background: url(https://raw.githubusercontent.com/szharf/hello-world/master/images/%E4%B9%A6%E6%88%BF.jpg) no-repeat; 
			background-size:100% 100%;
			font-family: "微软雅黑";
		}
		#navigate{
			width: 80%; 
			height: 50px;
			margin: auto;
			background-color: rgba(205,104,57,0.8) ;
		}
		.labels{
			border-bottom:solid gainsboro 1px;
			float: left;
			width: 25%;
			line-height: 50px;
			font-size: 20px;
			}
		.tab{
			display: none;
			background-color:rgba(238,118,33,0.8);
			overflow:auto; 
			appearance:none;
			-moz-appearance:none;
			-webkit-appearance:none;
			font-size: 16px;
			line-height: 40px;
			}
		/*美化滚动条*/
		.tab::-webkit-scrollbar-track {
			-webkit-box-shadow:inset 0 0 3px rgba(238,118,33,0.3);
			background-color:#F5F5F5;
		}
		.tab::-webkit-scrollbar {
			width:5px;
			background-color:#font: 5px F5 F5;;
		}
		.tab::-webkit-scrollbar-thumb {
			background-color:#CD6839;
			border:2px solid #CD6839;
		}
	

第三步，用jQuery添加事件

$(function(){
			//鼠标悬浮显示div的内容
			$(".labels_1").mouseover(function () {
				  $(".one").slideDown();
				  //鼠标离开，div隐藏
			}).mouseleave(function () {
				$(".one").slideUp(); 	
			 })
			 //2
			$(".labels_2").mouseover(function () {
				$(".two").slideDown();
			}).mouseleave(function () {
				$(".two").slideUp(); 	
			 })
			 //3
			$(".labels_3").mouseover(function () {
				$(".three").slideDown();
			}).mouseleave(function () {
				$(".three").slideUp(); 	
			 })
			 //4
			$(".labels_4").mouseover(function () {
				$(".four").slideDown();
			}).mouseleave(function () {
				$(".four").slideUp(); 	
			 })
			 
			 //获取页面高度,减去顶部高度
			 var height =$(window).height()-51;
			 //获取内容的高度
			 var height1 =$('.one').outerHeight();
			 //判断div高度是否大于页面高度
			 if(height1>=height){
					//当div高度大于页面高度时,为div设置高度
					$(".one").height(height);
			 }
			 var height2 =$('.two').outerHeight();
			 if(height2>=height){
				  $(".two").height(height);
			 }
			 var height3 =$('.three').outerHeight();
			 if(height3>=height){
				  $(".three").height(height);
			 }
			 var height4 =$('.four').outerHeight();
			 if(height4>=height){
				  $(".four").height(height);
			 }
		})

好了，很简单，这就已经完成了