Simple drop down menu

gistfile1.txt

I really like this post out on http://css-tricks.com/simple-jquery-dropdowns/

1. Download the files

2. Include this in your code
<script src="../Scripts/jquery.dropdownPlain.js" type="text/javascript"></script>

3. Create a menu
<div id="dropdownmenu">
    <ul class="dropdown">
        <li><a href="#" id="link_one"></a>
            <ul class="sub_menu">
                <li><a href="SomeWebPage.aspx">Go</a></li>
            </ul>
        </li>
        <li><a href="http://www.SomeWebPage2.com" target="_self">Another place</a></li>
        <li><a href="#" id="link_two">Go2</a></li>
        <li><a href="#" id="link_three">Go3</a>
            <ul class="sub_menu">
                <li><a href="#" id="link_four">Go4</a></li>
            </ul>
      </li>
    </ul>
</div>

4. Add your stylesheet and do whatever formatting you want, in this case, a little rounding on the edges
#dropdownmenu
{
    width:100%;
    margin-left:auto;
    margin-right:auto;
}
 
/* 
    LEVEL ONE
*/
ul.dropdown                         { list-style: none;margin: 0; padding: 0;position: relative; }
ul.dropdown li                      { font-weight: normal; float: left; zoom: 1; background: #d0d0ff; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }
ul.dropdown a:hover                 { color: #cc8500; }
ul.dropdown a:active                { color: #c70000; }
ul.dropdown li a                    { display: block; padding: 4px 8px; border-right: 1px solid #ebebff;
                                      color: #c70000; }
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                { background: #ebebff; position: relative; }
 
 
/* 
    LEVEL TWO
*/
ul.dropdown ul                      { list-style: none;margin: 0; padding: 0;width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; z-index:1; }
ul.dropdown ul li                   { font-weight: normal; background: #d0d0ff; color: #000; 
                                      border-bottom: 1px solid #ccc; float: none; }
                                       
                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a                 { border-right: none; width: 100%; display: inline-block; } 
 
/* 
    LEVEL THREE
*/
ul.dropdown ul ul                   { list-style: none; margin: 0; padding: 0;left: 100%; top: 0; }
ul.dropdown li:hover > ul            { visibility: visible; }