Question

我使用了一个类似于菜单的布局，它是如何显示主菜单的，以及当您将鼠标悬停在主菜单上时显示的子菜单。在这种情况下，我正在尝试使用同一行上的子菜单图标的“共享”菜单。我从http://cssdeck.com/labs/another-simple-css3-dropdown-menu中挑选了详细信息为什么我的菜单不能正常隐藏/显示？

HTML

a {
  padding: 4px;
}
i.fa {
  color: #8b8b8b;
}
ul {
  list-style-type: none;
}
ul li:hover ul {
  display: block;
}
ul li ul {
  display: none;
  padding: 0;
  visibility: hidden;
}
ul li ul:hover {
  display: block;
}
ul li ul li {
  display: inline-block;
}

<ul>
  <li style="color: #676767;"> <a style="color: #676767;" href="#"><i class="fa fa-share-alt"></i> Share</a>
    <ul class="socialShare">
      <li><a href="https://www.facebook.com/sharer/sharer.php?u=http://test.gpjbaker.com/brands/gp-j-baker/denbury-collection/"><i class="fa fa-facebook"></i></a>
      </li>
      <li><a href="https://twitter.com/home?status=http://test.gpjbaker.com/brands/gp-j-baker/denbury-collection/"><i class="fa fa-twitter"></i></a>
      </li>
      <li><a href="https://pinterest.com/pin/create/button/?url=http://test.gpjbaker.com/brands/gp-j-baker/denbury-collection/&media=&description="><i class="fa fa-pinterest"></i></a>
      </li>
    </ul>
  </li>
</ul>

Answer 1

我在一个单独的文件上运行你的代码，我发现你的错误是在html中。我想你想在Share上创建悬停效果，然后显示社交网络..这里是正确编码的HTML代码。

<ul>
    <li>
        <a style="color: #676767;" href="#"><i class="fa fa-share-alt"></i> Share</a>
        <ul class="socialShare">
            <li>
                <a href="https://www.facebook.com/sharer/sharer.php?u=http://test.gpjbaker.com/brands/gp-j-baker/denbury-collection/"><i class="fa fa-facebook"></i>Facebook</a>
            </li>
            <li>
                <a href="https://twitter.com/home?status=http://test.gpjbaker.com/brands/gp-j-baker/denbury-collection/"><i class="fa fa-twitter"></i>Twitter</a>
            </li>
            <li>
                <a href="https://pinterest.com/pin/create/button/?url=http://test.gpjbaker.com/brands/gp-j-baker/denbury-collection/&media=&description="><i class="fa fa-pinterest"></i>Pinterest</a>
            </li>
        </ul>
    </li>
</ul>

Answer 2

菜单未显示的原因是您尝试显示的菜单<ul>具有visibility: hidden，并且hover上的该属性未被更改。由于该元素已设置display: none（在block上设置为hover），因此您可以删除visibility属性。

我发现您的链接中的代码已设置visibility: hidden，但也会在visible上将其设置为hover。这也可以解决问题，但我认为没有任何理由在此基础上visibility。

此外，在您的特定示例中，您需要菜单<li>中的某些内容才能真正看到它正在显示。请参阅下面的更新代码段。

a {
  padding: 4px;
}
i.fa {
  color: #8b8b8b;
}
ul {
  list-style-type: none;
}
ul li:hover ul {
  display: block;
}
ul li ul {
  display: none;
  padding: 0;
  /*visibility: hidden;*/ /* Not needed, since there is already display:none*/
}
ul li ul:hover {
  display: block;
}
ul li ul li {
  display: inline-block;
}

<ul>
  <li style="color: #676767;"> <a style="color: #676767;" href="#"><i class="fa fa-share-alt"></i> Share</a>
    <ul class="socialShare">
      <!-- Need some content in the <li>s -->
      <li><a href="https://www.facebook.com/sharer/sharer.php?u=http://test.gpjbaker.com/brands/gp-j-baker/denbury-collection/"><i class="fa fa-facebook">
        link a
      </i></a></li>
      <li><a href="https://twitter.com/home?status=http://test.gpjbaker.com/brands/gp-j-baker/denbury-collection/"><i class="fa fa-twitter">
        link b
      </i></a></li>
      <li><a href="https://pinterest.com/pin/create/button/?url=http://test.gpjbaker.com/brands/gp-j-baker/denbury-collection/&media=&description="><i class="fa fa-pinterest">
        link c
      </i></a></li>
    </ul>
  </li>
</ul>

为什么我的“菜单”没有正确显示？

2 个答案: