前端如何制作简易的菜单多级导航栏

文章前言：
      菜单多级导航栏使用非常广泛，在大型的门户网站和UI设计中发挥了非常重要的意义。多级导航栏花样层次不穷，这里我将介绍一个比较简单的导航栏，我们主要用到的是CSS。

一.准备知识：

1. CSS
2. HTML

二.代码实现：

  主体body部分：

• [ 1] 先button一个按钮，class一个“dropdown”。
• [ 2]用一个div包起来，class一个“dropdown-content”形成最内的一个块。
• [ 3]最外层用一个div抱起来形成第一子栏的块，class一个“dropdown”。

<div class="dropdown">
 <button class="dropbtn">下拉菜单button>
  <div class="dropdown-content">
   <a href="#">菜单1a>
   <a href="#">菜单2a>
   <a href="#">菜单3a>
  div>
div>

  样式CSS部分：

.dropdown
{
	display:inline-block;
}
.dropbtn
{
	background-color:green;
	color:white;
	padding:16px;
	font-size:16px;
	border:none;
	cursor:pointer;/*手型光标*/
}

.dropdown-content
{
    display:none;/*隐藏元素且不保留物理位置，不占物理空间*/
    background-color:#f9f9f9;
    min-width:160px;/*设置最小宽度*/

    /*设置div的外阴影*/
    /*对应值为水平，垂直，模糊距离，rgba，颜色，a表示透明度0-1*/
    box-shadow:0px  8px 16px rgba(0,0,0,0.3);
}
/*悬停显示*/
.dropdown:hover .dropdown-content
{
    display:block;
}
.dropdown-content a
{
    color:black;
    display:block;
    padding:12px 16px;
    text-decoration:none;
}
.dropdown-content a:hover
{
    background-color:#f1f1f1;
}

三.执行结果：