Html5实现下拉菜单

话不多说，直奔主题

			

				
主页
				
新闻
				

					

            下拉菜单
              

                链接 1 
                链接 2 
                链接 3
              
					
				
				
关于
			
			
导航栏上的下拉菜单
			
鼠标移动到 "下拉菜单" 链接先显示下拉菜单。
		

/*css代码*/
ul {
			     list-style-type: none;
			     margin: 0;
			     padding: 0;
			     background-color: #999;
			     overflow: hidden;
			     /*        注意: overflow:hidden 添加到 ul 元素,以防止 li 元素列表的外出(当li{float:left}时)。         来源链接：https://www.runoob.com/try/try.php?filename=trycss_navbar_horizontal_float&basepath=0        */
			 }
			
			 li {
			     float: left;
			 }
			
			 li a {
			     color: white;
			     padding: 14px 16px;
			     display: inline-block;
			     text-decoration: none;
			 }
			
			 li>a.active {
			     background-color: green;
			 }
			
			 li>a:hover:not(a.active),
			 .dropbtn:hover {
			     background-color: #555;
			 }
			
			 .dropdown-content {
			     display: none;
			     position: absolute;
			     /* 默认相对于进行绝对定位 */
			     background-color: #f9f9f9;
			     min-width: 100px;
			     box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
			 }
			
			 .dropdown-content a {
			     color: black;
			     display: block;
			     /* 因为标签不是块元素，min-width:100px不会生效 */
			 }
			
			 .dropdown-content a:hover {
			     background-color: #f1f1f1;
			     color: deepskyblue;
			 }
			
			 .dropdown:hover .dropdown-content {
			     display: block;
           opacity: 0.9;/*下拉菜单半透明效果*/
			 }
			
			 /* 中间的空格表示，鼠标悬念在.dropdown上时，dropdown的子元素.dropdown-content变为块元素 */
			 /* ### 待完善 ###   
			    因为.dropdown只用过一次，觉得可以删除
来减少代码量，尝试  将.dropdown:hover .dropdown-content {display: block;} 修改为.dropbtn:hover+.dropdown-content {display: block;} 并删除
后，鼠标悬停在“下拉菜单”上，会显示下拉菜单， 但无法选中菜单中的“链接 x”， ### 为什么？该如何完善？ ###    
			 */

最终效果图：