Drop down menu

MariaCdH · 09-18-2012, 02:49 PM

Hello

Could anyone tell me how to convert the following menu in a drop down menu? (with the same style of the page where it is located).

Thank you

Code:

<td><div id="menu">
						<ul>
							<li class="first"><a href="#" accesskey="1" title=""><a href="homepage.html" title="homepage" target="_self">Home</a></a></li>
							<li><a href="#" accesskey="2" title=""><a href="About EMC.html" title="About" target="_self">About</a></a></li>
							<li><a href="#" accesskey="3" title=""><a href="services.html" title="services" target="_self">Services</a></a></li>
							<li><a href="#" accesskey="3" title=""><a href="join.html" target="_self">Join</a></a></li>
							<li><a href="#" accesskey="4" title=""><a href="Contact.html" target="_self">Contact</a></a></li>
						</ul>
					</div></td>

rdspoons · 09-18-2012, 03:46 PM

You might try this:

requires: <!doctype html>

Code:

#menu {position:relative;height:1.5em;}
#menu ul {position:absolute;background:#3245ff;list-style:none;padding:5px;width:60px;}
#menu ul li.first {display:inline;}
#menu ul:hover li {display:block;}
#menu ul li {display:none;}
#menu ul li a {color:white;text-decoration:none;}

You need to adjust the background/color/height/padding to your liking.

The style puts an absolutely positioned list inside a relatively position element.
It then hides all of the list items except for the first.
When the mouse hovers over the list, all of the list items are revealed as block elements.

This style works in modern browsers, but will not work in older vinatge browsers - browsers that do not undersand the doctype.
If you are targeting IE7/IE6 or other vintage broswers I think you need to look to a script solution.