【个人向】横向网页导航栏 常用样式一

一般思路
1，“div” 做父级盒子
2，第一个 “ul” 做一级目录导航
3，第二个 “ul” 做二级目录导航
4，将 “a” 链接充满导航组块
5，第二个 “ul” 用定位独立出来
6，最后添加鼠标悬停样式

代码如下：

html 部分

	<div class="nav">
		<ul class="menu">
		    <li><a href="#">首页</a></li>
		    <li class="stop">
	        	<a href="#">产品</a>
	        	<ul class="submenu">
			        <li><a href="#">产品分类一</a></li>
			        <li><a href="#">产品分类二</a></li>
			        <li><a href="#">产品分类三</a></li>
		      	</ul>
	    	</li>
		    <li><a href="#">方案</a></li>
		    <li><a href="#">新闻</a></li>
		    <li class="stop">
	      		<a href="#">关于</a>
	      		<ul class="submenu">
			      	<li><a href="#">简介</a></li>
			        <li><a href="#">联系</a></li>
	      		</ul>
	    	</li>
		</ul>
	</div>

css部分

	/*全局样式*/
	ul{
	  margin: 0;
	  padding: 0;
	  list-style-type: none;
	}
	a {
	  text-decoration: none;
	  color: #333333;
	}
	
	/*一级导航样式*/
	.nav {
	  width: 500px;
	  height: 42px;
	  background-color: #f7f7f7  /*这个“nav”的样式只是为了现在演示用，届时根据实际需求做改变*/
	}
	.menu > li {  /*可以对“li”进行class一下，一级二级做区分*/
	  display: inline-block;
	}
	.menu > li > a {  /*如果可以，对“a”进行class*/
	  height: 42px;
	  padding: 0 15px;
	  display: flex;
	  align-items: center;  /*文本垂直居中，前面padding相当于做了水平居中*/
	}
	.menu > li:hover {
	  background-color: #90EE90;  /* “ *：hover ” 鼠标悬停时进行的状态*/
	}
	.menu > li:hover > a{
	  color: #ffffff;
	}
	.stop:hover .submenu { /*防止可能出现鼠标悬停其他“li”时，二级目录也显示的问题*/
	  display: block;
	}
	
	/*二级目录*/
	.submenu {
	  display: none;  /*这里可以先写，先将二级目录隐藏，方便一级目录样式成形*/
	  position: absolute;
	  background-color: #f7f7f7;
	}
	.submenu > li > a {  /*如果可以，对“a”进行class*/
	  height: 32px;
	  padding: 0 15px;
	  display: flex;
	  align-items: center;  /*文本垂直居中，前面padding相当于做了水平居中*/
	}
	.submenu > li:hover {
	  background-color: #90ee90;
	}
	.submenu > li:hover > a {
	  color: #ffffff;
	}

参考来源：
https://www.bilibili.com/video/BV19v411B7Qi?share_source=copy_web

愿你每天都有进步，不枉费你打开这个页面。
如有不对的地方，请指正。