Simple drop down menu

I really like this post out on

It’s simple to use and easy to format using CSS. Here’s something you might want to use.

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>
        	        <li><a href="" 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>

4. Add your stylesheet and do whatever formatting you want, in this case, a little rounding on the edges


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; }

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; } 

ul.dropdown ul ul 					{ list-style: none; margin: 0; padding: 0;left: 100%; top: 0; }
ul.dropdown li:hover > ul 			{ visibility: visible; }

That’s it. You’ve got yourself a simple menu.

Previous Post
Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: