Pinterest DropDownメニューの仕組みは？

Question

さまざまなjqueryまたは他の同様のパッケージを使用してカスタムDropDownメニューを作成する多くの簡単な方法があることは知っています。 これらを脇に置いて..私はPinterestの人々がどのように深みが変更されていない非常に反応の良いメニューを作成するために管理しているかについてより興味があります..そしてCSSのプロパティは変更されません（ええ.. dropmenuコンテナはcss "表示されていても表示されません!!!）

これまでのところ、すべての表示要素はハードコードされており、ドロップダウンブロックはルールの下で基底CSSに隠されていました.HeaderContainer li ul {...;表示：なし; ...}

私の心を揺さぶっていることは、メニューが表示されてもこのプロパティが変更されないことです。私は、いくつかのjavascript関数が表示要素をキャンセルする要素にスタイル属性を追加することを期待していたでしょう：none;

誰も私にPinterestがこれをやっている方法を説明することはできますか？ ここにそのナビがあります。

<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ドロップダウンメニューです。

親要素の上にマウスを置くと、inside要素のdisplayプロパティが "not none"（ブロック、インラインまたはインラインブロックなど）に切り替わります。メニューはもうドロップダウンされていないときにいつでも要素を検査しているので、どれもプロパティ：私はあなたが表示を見ると思います

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

：

は、より正確には、このルールは、（：379 pinboard_38edcc4c.css）が適用されます。ほとんどのデバッガはページ内の要素をホバリングしながら「CSSルール」ビューを更新しません。 while CSSのルールを見ている：ホバーは、デバッガでは常に難しい。

Googleの "CSSドロップダウンメニューの使い方"をお勧めします。