Pinterest DropDown菜单如何工作？

Question

我知道有很多简单的方法可以使用各种jquery或其他类似程序包创建自定义DropDown菜单。 将所有这些放在一边。.我对Pinterest的人们如何设法创建一个响应速度非常快的菜单，其中深度没有更改.. css属性没有更改（是的。dropmenu容器显示css“显示：none”，即使它可见也可以！！！）

到目前为止，我已经确定所有显示元素都是经过硬编码的，并且下拉规则根据以下规则隐藏在基本CSS中：.HeaderContainer li ul {...; 显示：无； ...}

让我感到困惑的是，即使菜单可见，此属性也不会改变。 我本来希望将一些javascript函数添加到该元素的样式属性中，以消除display：none;

谁能向我解释Pinterest是如何做到的？ 这是他们的Nav HTML

<ul id="Navigation">
    <li><a onclick="Modal.show('Add'); return false" class="nav" href="#">Add<span class="PlusIcon"></span></a></li>

    <li>
      <a class="nav" href="/about/">About<span></span></a>
      <ul>
        <li><a href="/about/help/">Help</a></li>
        <li><a href="/about/goodies/">Pin It Button</a></li>
        <li class="beforeDivider"><a href="/about/copyright/">Copyright</a></li>
        <li class="divider"><a href="/about/careers/">Careers</a></li>
        <li><a href="/about/team/">Team</a></li>
        <li><a href="http://blog.pinterest.com/">Blog</a></li>
     </ul>
    </li>

    <li id="UserNav">
      <a class="nav" href="/guacamoly/"><img alt="img" src="http://media-cdn.pinterest.com/avatars/guacamoly-72.jpg">Amol<span></span></a>
      <ul>
        <li><a href="/invites/">Invite Friends</a></li>
        <li class="beforeDivider"><a href="/invites/facebook/">Find Friends</a></li>
        <li class="divider"><a href="/guacamoly/">Boards</a></li>
        <li><a href="/guacamoly/pins/">Pins</a></li>
        <li><a href="/guacamoly/pins/?filter=likes">Likes</a></li>
        <li class="divider"><a href="/settings/">Settings</a></li>
        <li><a href="/logout/">Logout</a></li>
       </ul>
    </li>
</ul>

Answer 1

这是基本的CSS下拉菜单。

当鼠标悬停在父菜单项上时，内部元素的显示属性切换为“ not none”（块，行内或行内块或其他）。

更确切地说，此规则适用（pinboard_38edcc4c.css：379）：

.HeaderContainer li:hover ul {
  display: block;
}

我认为您看到了display：none属性，因为只要不再放下菜单，就在检查元素。 并且大多数调试器在将页面上的元素悬停时都不会刷新“ CSS规则”视图。 在：hover时查看CSS规则对于调试器来说总是很棘手的。

我建议你用谷歌“ CSS下拉菜单如何做”，并给它一个镜头。