通过css实现按钮的下拉

就是当鼠标移到这个按钮上时，可以显示出这个按钮下一级的一堆按钮

类似于这种样式，只通过css和html来实现

关键在于：.nav_menu-item:hover .nav_submenu{display:block;}这里，将.nav_submenu的display属性由none不显示，改成了block块状显示。

<style>
nav ul {
  list-style: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}

h1 {
  width: 500px;
  margin: 100px auto 20px;
  color: #f0f0f0;
  text-align: center;
}

.nav {
position:relative;
z-index:10000;
  width: 200px;
  margin: 0 0 0 0;

  color: #ffffff;
}
.nav a {
color:white;
  display: block;
  padding: 0 16px;
  line-height: inherit;
  cursor: pointer;
}
.nav__menu {

  line-height: 45px;
  font-weight: 700;
  text-transform: uppercase;
}
.nav__menu-item {
background-color:rgba(88,155,111,0.5);
border-radius: 8px;
margin-left:20px;
  display: inline-block;
  position: relative;
}
.nav__menu-item:hover {
  background-color:  rgba(88,155,111,1);
}
<pre name="code" class="javascript">.nav__menu-item:hover .nav__submenu {
  display: block;
}

.nav__submenu {border-radius: 8px;font-size:14px; font-weight: 400; text-transform: none; display: none; position: absolute; width: 120px; background-color: rgba(88,155,111,1);}.nav__submenu-item:hover { background: rgba(0, 0, 0, 0.1);}</style>

 <nav class="nav">
  <ul class="nav__menu">
    
    <li  style="float:left;" class="nav__menu-item"><a>免费注册</a>
      <ul class="nav__submenu">
        <li class="nav__submenu-item"> <a href="<%=basePath%>register/registerPage/0">替代电厂</a></li>
        <li class="nav__submenu-item"> <a href="<%=basePath%>register/registerPage/1">被替代电厂</a></li>
        <li class="nav__submenu-item"> <a href="<%=basePath%>register/registerPage/4">售电电厂</a></li>
        <li class="nav__submenu-item"> <a href="<%=basePath%>register/registerPage/2">售电企业</a></li>
         <li class="nav__submenu-item"> <a href="<%=basePath%>register/registerPage/3">购电企业</a></li>
      </ul>
    </li>
           <li style="float:left;"  class="nav__menu-item"><a href="<%=basePath%>login" >登录</a></li>
            </ul>
           </nav>