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下拉菜單如何做”，並給它一個鏡頭。