HTML+CSS添加下拉餐单

一、效果：

焦点定位餐单，自动弹出下拉内容：

二、CSS：

<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.menu_span{
  background-color: #409eff;
  color:white;
  font-size: 13px;
  padding:6px;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #409eff;
  min-width: 60px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 9px;
}
.dropdown:hover .dropdown-content {
  display: block;
  background-color: #99CCFF;
}
</style>

三、HTML：

 <div style="padding-top:20px" class="dropdown">
                        <span class="menu_span">埋点自动化</span>
                        <div class="dropdown-content">
                           <a href="../maidian.jsp">埋点测试</a><br>
                           <a href="maidian/report">埋点统计</a>
                        </div>
                 </div>
                 <div style="padding-top:20px" class="dropdown">
                        <span class="menu_span">UI自动化</span>
                        <div class="dropdown-content">
                           <a href="../uiTest.jsp">UI测试</a><br>
                           <a href="../uiTest.jsp">统计</a>
                        </div>
                 </div>
                 <div style="padding-top:20px" class="dropdown">
                        <span class="menu_span">接口自动化</span>
                        <div class="dropdown-content">
                           <a href="../uiTest.jsp">接口测试</a><br>
                           <a href="../uiTest.jsp">接口统计</a>
                        </div>
                 </div>