Question

I know there are many easy ways to create custom DropDown menus using various jquery or other similar packages.
Setting all those aside.. I’m more curious as to how the folks at Pinterest have managed to create a very responsive menu where depths are not changed.. and css properties are not altered (yeah.. the dropmenu container shows css “display:none” even when it is visible!!!)

So far I’ve figured out that all the display elements are hard coded and the dropdown blocks are hidden in the base css under the rule : .HeaderContainer li ul { … ; display:none; …}

The thing that is boggling my mind is that this property never gets altered even when the menu is visible. I would have expected to have some javascript function added a style attribute to that element canceling out the display:none;

Can anyone explain to me how Pinterest is doing this?
Here is their 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

this is a basic CSS dropdown menu.

the inside elements have their display property switched to “not none” (either block, inline or inline block or whatever) when the mouse goes over the parent menu item.

more precisely, this rule applies (pinboard_38edcc4c.css:379):

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

I think you see the display:none property because you are inspecting elements whenever the menu is not anymore dropped down. and most debuggers won’t refresh the “CSS rules” view while hovering elements in the page. Seeing CSS rules while :hover is always tricky with debuggers.

I suggest you google “CSS dropdown menu how to” and give it a shot.