类=＆＃34;下拉＆＃34;和属性data-dropdown-menu不能与嵌套的ul一起使用

Question

我想要获得一个ul来放下几个链接图标，但无论我输入什么，唯一改变的是图标的方向。我觉得我错过了一些相当简单的东西，但谷歌或基金会的网站也没有帮助。我尝试使用.menu li a i {}来调用嵌套的ul，但那是错的。我也尝试过其他方式，没有任何积极的结果。

＆＃13;

＆＃13;

/* Styles go here */

.menu-hover-lines {
  margin-top: 30px;
  float: right, bottom;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 3px;
  transition: all 0.35s ease;
}

.menu-hover-lines li a {
  padding: 0.75rem 0;
  color: #333;
  position: relative;
  margin-left: 1rem;
  margin-right: 4rem;
  margin-top: 20px;
}

.menu-hover-lines li.active>a {
  background-color: transparent;
}


/* Nav transition settings */

.menu-hover-lines a::before,
.menu-hover-lines a::after {
  height: 3px;
  position: absolute;
  content: '';
  transition: all 0.40s ease;
  background-color: #932929;
  width: 0;
}

.menu-hover-lines a::before {
  top: 0;
  left: 0;
}

.menu-hover-lines a::after {
  bottom: 0;
  right: 0;
}

.menu-hover-lines a:hover::before,
.menu-hover-lines .active a::before,
.menu-hover-lines a:hover::after,
.menu-hover-lines .active a::after {
  width: 100%;
}

.menu li a>i {
  display: none;
}

.menu i:hover {
  display: inline;
}

＆＃13;

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet" />


<ul class="menu dropdown vertical menu-hover-lines" data-dropdown-menu="">

  <li>
    <a href="">Get in touch</a>
    <ul class="menu">
      <li>
        <a href="#">
          <i class="fas fa-envelope fa-2x" data-toggle="tooltip" title="Email me!"></i>
        </a>
      </li>
      <li>
        <a href="http://twitter.com">
          <i class="fab fa-twitter fa-2x" data-toggle="tooltip" title="Tweet me!"></i>
        </a>
      </li>
      <li>
        <a href="http://instagram.com">
          <i class="fab fa-instagram fa-2x" data-toggle="tooltip" title="Message me!"></i>
        </a>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您必须在悬停效果的所有内容的外部添加div

/* Styles go here */

.menu-hover-lines {
  margin-top: 30px;
  float: right, bottom;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 3px;
  transition: all 0.35s ease;
}

.menu-hover-lines li a {
  padding: 0.75rem 0;
  color: #333;
  position: relative;
  margin-left: 1rem;
  margin-right: 4rem;
  margin-top: 20px;
}

.menu-hover-lines li.active>a {
  background-color: transparent;
}


/* Nav transition settings */

.menu-hover-lines a::before,
.menu-hover-lines a::after {
  height: 3px;
  position: absolute;
  content: '';
  transition: all 0.40s ease;
  background-color: #932929;
  width: 0;
}

.menu-hover-lines a::before {
  top: 0;
  left: 0;
}

.menu-hover-lines a::after {
  bottom: 0;
  right: 0;
}

.menu-hover-lines a:hover::before,
.menu-hover-lines .active a::before,
.menu-hover-lines a:hover::after,
.menu-hover-lines .active a::after {
  width: 100%;
}

ul .menu {
  display: none;  
}

 .drop_down:hover  ul .menu{
  display: inline; 
  
}

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet" />

<div class="drop_down">
<ul class="menu dropdown vertical menu-hover-lines" data-dropdown-menu="">

  <li>
    <a href="" class="hover_text">Get in touch</a>
    <ul class="menu">
      <li class="content">
        <a href="#">
          <i class="fas fa-envelope fa-2x" data-toggle="tooltip" title="Email me!"></i>
        </a>
      </li>
      <li class="content">
        <a href="http://twitter.com">
          <i class="fab fa-twitter fa-2x" data-toggle="tooltip" title="Tweet me!"></i>
        </a>
      </li>
      <li class="content">
        <a href="http://instagram.com">
          <i class="fab fa-instagram fa-2x" data-toggle="tooltip" title="Message me!"></i>
        </a>
      </li>
    </ul>
  </li>
</ul>
</div>