Dropdown Navigation Tutorial

Step 1: Adding CSS

NOTE: Tutorial code is for the blue theme.

Simply copy the following and overwrite your Top Navigation CSS rules:

css > theme.css

/* TOP NAVIGATION BAR */
#pas_nav_top ul {
margin: 0;
padding: 0;
height: 32px;
border-style: solid;
border-width: 1px;
border-color: #6396D3 #355C8C #355C8C #355C8C;
background: #2F65A8;
}
#pas_nav_top li {
list-style-type: none;
margin: 0;
display: block;
float: left;
text-align: center;
}
#pas_nav_top li a {
color: #fff;
font-weight: bold;
font-size: 11px;
text-decoration: none;
line-height: 32px;
display: block;
padding: 0 10px;
border-right: 1px solid #183D68;
border-left: 1px solid #6396D3;
}
#pas_nav_top li a:hover {
background: #3073C2;
}

/* Dropdown Styles */
#pas_nav_top li ul {
background: #3073C2;
border-bottom: 1px solid #183D68;
display:none;
height:auto;
position:absolute;
width:205px; /* width of dropdown */
z-index:200;
/*top:1em;
/*left:0;*/
border-top:none;
}
#pas_nav_top li:hover ul {
display:block;
}
#pas_nav_top li li {
display:block;
float:none;
}
#pas_nav_top li ul a {
display:block;
font-size:12px;
font-style:normal;
line-height:28px; /* height of dropdown items */
padding: 0 10px;
text-align:left;
border:none;
border-top: 1px solid #183D68;
}
#pas_nav_top li ul a:hover {
background: #2F65A8;
color:#fff;
} 

Step 2: HTML Markup

Then add additional sub navigation items within Top Navigation.

Example HTML snippet for a Top Navigation item (& nested sub nav items)

<li><a href="#">Top Level Dropdown Menu</a>
<ul>
<li><a href="#">Sub Menu Item #1</a></li>
<li><a href="#">Sub Menu Item #2</a></li>
<li><a href="#">Sub Menu Item #3</a></li>
<li><a href="#">Sub Menu Item #4</a></li>
</ul>
</li>

Then, to add submenus that will dropdown, all that is needed is a ul nested withing the li of top nav.

Example of entire Top Navigation (taken from example site)

layout > layout.html

<div id="pas_nav_top">
<ul>
<li><a href="{{ tld }}">Home</a></li>
{% if signed_in %}
<li><a href="{{ tld }}/my-account/my-account.html">My Account</a></li>
{% else %}
<li><a href="{{ tld }}/members/new">Sign Up</a></li>
{% endif %}
<li><a href="{{ tld }}/rakeback-offers.html">Offers</a></li>
<li><a href="{{ tld }}/promotions/promotions.html">Promotions</a></li>
<li><a href="#">Top Level Dropdown Menu</a>
<ul>
<li><a href="#">Sub Menu Item #1</a></li>
<li><a href="#">Sub Menu Item #2</a></li>
<li><a href="#">Sub Menu Item #3</a></li>
<li><a href="#">Sub Menu Item #4</a></li>
</ul>
</li>
<li><a href="{{ tld }}/refer-a-friend/refer-a-friend.html">Tell A Friend</a></li>
<li><a href="{{ tld }}/faq.html">FAQ</a></li>
<li><a href="{{ tld }}/member_tickets/">Contact Us</a></li>
</ul>

</div><!-- end pas_nav_top -->

If you have any questions, problems, or requests (different colors), just ask in this thread and I will post solutions.