带有下拉菜单的弹出式导航

Question

我正在尝试使用下拉菜单在悬停导航上创建一个弹出窗口。

我已经设法让弹出窗口工作，但不是下拉菜单。

我附上了我想要发生的事情的图片。只是在下拉菜单中挣扎。

在此处查看 jsfiddle：https://jsfiddle.net/pLn4peoo/

见附图。

到目前为止，我有以下代码：

HTML：

<div class="ResponsiveSideNav" style="display: block;">
    <ul class="ClearFix">
        <li><i class="fa fa-volume-control-phone" aria-hidden="true"></i><a href="#">Item A</a>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      </ul>
  </li>
        <li><i class="fa fa-cloud-download" aria-hidden="true"></i><a href="#">Item B</a></li>
        <li><i class="fa fa-list" aria-hidden="true"></i><a href="#">Item C</a></li>
    </ul>
</div>

CSS：

.ResponsiveSideNav ul {
  margin: 0;
  padding: 0;
}

.ResponsiveSideNav {
  width: 100%;
  background: #FFF;
  margin-bottom: 5px;
  font-size: 15px;
  z-index: 99999;
  display: none;
  border: 1px solid #E0E0E0;
}

.ResponsiveSideNav ul li {
  position: relative;
  width: 50px;
  padding: 15px 0px;
  display: pointer;
  border-top: 1px solid #E0E0E0;
  background-color: #EAECED;
  background-repeat: no-repeat;
  overflow: hidden;
  white-space: nowrap;
  -webkit-transition: width 0.5s;
  -moz-transition: width 0.5s;
  -o-transition: width 0.5s;
  cursor: pointer;
  cursor: hand;
}

.ResponsiveSideNav ul li:hover {
  width: 250px;
  background: #474747;
}

.ResponsiveSideNav ul li:hover a,
.ResponsiveSideNav ul li:hover i {
  color: #FFF;
}

.ResponsiveSideNav ul li i {
  display: inline;
  padding-left: 17px;
  color: black;
}

.ResponsiveSideNav ul li img {
  height: 20px;
  padding: 0px 14px;
}

.ResponsiveSideNav ul li a {
  display: inline;
  padding-left: 25px;
  color: black;
  text-decoration: none;
}


/*1st level sub-menu */

.ResponsiveSideNav ul ul {
  /*display:none;*/
}

.ResponsiveSideNav ul li:hover > ul {
  height: auto;
  width: 180px;
  display: block;
}

.ResponsiveSideNav ul ul li:hover > a {
  color: #d2aa76;
  border-bottom: none;
}

.ResponsiveSideNav ul ul {
  padding: 0;
  position: absolute;
  top: 100%;
  padding-top: 15px;
}

.ResponsiveSideNav ul ul li {
  float: none;
  position: relative;
  padding: 7px 0px;
  border-top: 1px solid #000;
  background: #423d33;
  background: linear-gradient(top, #423d33 0%, #4a4843 40%);
  background: -moz-linear-gradient(top, #423d33 0%, #4a4843 40%);
  background: -webkit-linear-gradient(top, #423d33 0%, #4a4843 40%);
  -webkit-box-shadow: 0px 5px 14px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0px 5px 14px rgba(50, 50, 50, 0.75);
  box-shadow: 0px 5px 14px rgba(50, 50, 50, 0.75);
  transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0;
}

.ResponsiveSideNav ul ul li a {
  font-size: 0.8em;
  padding-left: 15px;
}

.ResponsiveSideNav ul ul li a:hover {
  border-bottom: none;
}

Answer 1

您必须为下拉按钮添加一个 div。并显示：无，使用 css 列表。使用 jQuery，您可以使用 slideUp 和 slideDowm， here you can see the code I add

$(document).ready(function() {
  $('.button').click(function() {
    if ($(".drop-down").is(":hidden")) {
      $(".drop-down").slideDown(500);
    } else {
      $(".drop-down").slideUp(500);
    }
  });
});

.ResponsiveSideNav ul {
  margin: 0;
  padding: 0;
}

.ResponsiveSideNav {
  width: 100%;
  background: #FFF;
  margin-bottom: 5px;
  font-size: 15px;
  z-index: 99999;
  display: none;
  border: 1px solid #E0E0E0;
}

.ResponsiveSideNav ul li {
  position: relative;
  width: 50px;
  padding: 15px 0px;
  display: pointer;
  border-top: 1px solid #E0E0E0;
  background-color: #EAECED;
  background-repeat: no-repeat;
  overflow: hidden;
  white-space: nowrap;
  -webkit-transition: width 0.5s;
  -moz-transition: width 0.5s;
  -o-transition: width 0.5s;
  cursor: pointer;
  cursor: hand;
}

.ResponsiveSideNav ul li:hover {
  width: 250px;
  background: #474747;
}

.ResponsiveSideNav ul li:hover a,
.ResponsiveSideNav ul li:hover i {
  color: #FFF;
}

.ResponsiveSideNav ul li i {
  display: inline;
  padding-left: 17px;
  color: black;
}

.ResponsiveSideNav ul li img {
  height: 20px;
  padding: 0px 14px;
}

.ResponsiveSideNav ul li a {
  display: inline;
  padding-left: 25px;
  color: black;
  text-decoration: none;
}


/*1st level sub-menu */

.ResponsiveSideNav ul ul {
  /*display:none;*/
}

.ResponsiveSideNav ul li:hover > ul {
  height: auto;
  width: 180px;
  display: block;
}

.ResponsiveSideNav ul ul li:hover > a {
  color: #d2aa76;
  border-bottom: none;
}

.ResponsiveSideNav ul ul {
  padding: 0;
  position: absolute;
  top: 100%;
  padding-top: 15px;
}

.ResponsiveSideNav ul ul li {
  float: none;
  position: relative;
  padding: 7px 0px;
  border-top: 1px solid #000;
  background: #423d33;
  background: linear-gradient(top, #423d33 0%, #4a4843 40%);
  background: -moz-linear-gradient(top, #423d33 0%, #4a4843 40%);
  background: -webkit-linear-gradient(top, #423d33 0%, #4a4843 40%);
  -webkit-box-shadow: 0px 5px 14px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0px 5px 14px rgba(50, 50, 50, 0.75);
  box-shadow: 0px 5px 14px rgba(50, 50, 50, 0.75);
  transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0;
}

.ResponsiveSideNav ul ul li a {
  font-size: 0.8em;
  padding-left: 15px;
}

.ResponsiveSideNav ul ul li a:hover {
  border-bottom: none;
}

.button{
	font-family:Verdana, Geneva, sans-serif;
	color:#CCC;
}

.drop-down{
	display:none;
}

.nav{
	width:100%;
	height:50px;
	background-color: #EAECED;
	padding:10px;
}

.nav li{
    list-style:none;
	  text-decoration: none;
}

.nav li a{
	color:#000;
}

.nav li a:hover{
	color:#666;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>


<body>
<div class="nav">
	<ul>
    	<li class="button"><a href="#"> Home </a> </li>
    </ul>
	<!--button type="button" class="button"> Dropdown</button-->
</div>


<div class="drop-down">
<div class="ResponsiveSideNav" style="display: block;">
    <ul class="ClearFix">
        <li><i class="fa fa-volume-control-phone" aria-hidden="true"></i><a href="#">Item A</a>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      </ul>
  </li>
        <li><i class="fa fa-cloud-download" aria-hidden="true"></i><a href="#">Item B</a></li>
        <li><i class="fa fa-list" aria-hidden="true"></i><a href="#">Item C</a></li>
    </ul>
</div>
</div>

</body>