侧导航栏下拉菜单答案

【问题标题】：Side nav-bar dropdown侧导航栏下拉菜单
【发布时间】：2016-04-13 23:33:07
【问题描述】：

我想知道是否可以在导航栏上创建一个下拉部分，例如：单击“产品”等选项之一，并在下拉列表中显示产品列表，当您再次单击列表消失。这是否可以使用 HTML/CSS/JS，如果可以，如何？

我目前正在使用ul 和li 标签来制作我网站上的导航栏，我不确定是否有其他方法可以做到。

任何帮助都会很棒！

【问题讨论】：

stackoverflow.com/questions/34199837/custom-dropdown-menu。然后当您用户选择最终的下拉选择时，将它们全部隐藏。

标签： javascript html css

【解决方案1】：

创建下拉菜单的方法有很多种。我想使用一种几乎纯 CSS/HTML 的方法来应对您的挑战。

考虑尝试这样的事情：

/*  CSS  */
ul.navigation > li{
  display:inline-block;
  position:relative;
  list-style:none;
  margin:0px;
}

ul.navigation > li > ul{
  position:absolute;
  background:lightgray;
  display:none;
  left:0px;
  top:20px;
}

ul.navigation > li > a:focus + ul{
  display:block;
}

<!-- HTML -->
<ul class="navigation">
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li>
    <a href="javascript:void(0)">Products</a>
    <ul>
      <li>Bottles</li>
      <li>Cans</li>
      <li>Cups</li>
    </ul>
  </li>
</ul>

首先，我们确保我们想要用作切换而不是链接的导航链接具有href="javascript:void(0)"。这将防止 a 元素的默认行为离开页面。

接下来我们需要通过在嵌套的 ul 中添加 display:none 来隐藏子菜单。

然后为了显示我们的子菜单，我们要求用户关注给定导航的锚标记，该标记将子菜单的显示属性设置为阻止。

示例： http://codepen.io/eoghanTadhg/pen/ZWxXEb

【讨论】：