Pure CSS menu
The main menu contained within the shared/_Layout.cshtml uses only CSS to create the dropdown options. There is no jQuery or scripts invloved. The code has been written to accomodate a single dropdown level.
The parent block element is defined with the id MainMenu and the top level URL's or trigger elements are contained within a standard <dl> with <dd> child elements.
The dropdown items are held in <ul> nested within given <dd>
Menu items within a <li> and <em> have different visual style which is used to denote a "deep link" such as <a href="/Home/Layouts#Iconography">Iconography</a>
view codeSample HTML code
<blockquote id="MainMenu">
<dl>
<dd><a href="/">Home</a>
<ul class="ui-corner-tr ui-corner-bottom shadow">
<li><a href="/Home/pureCSSmenu">Dropdown menu</a></li>
</ul>
</dd>
<dd>
<a href="/Home/Layouts">Layouts</a>
<ul>
<li><em><a href="/Home/Layouts#Iconography">Iconography</a></em></li>
</ul>
</dd>
<dd><a href="/Home/Forms">Forms</a>
</dd>
<dd><a href="/Home/Interactions">Interactions</a>
</dd>
<dd><a href="/Home/TwoColLayout">Two column layout</a>
</dd>
</dl>
</blockquote>