Making a Dropdown Nav Bar With CSS

[Matt5581]

Hey guys I'm trying to figure a way to create a dropdrown menu Navbar with CSS.I'm trying to make it look something like this:Home About ▼ (and have it drop down with two or three submenus) Contact, etc.Thank you very much for your help. I truly appreciate it.

[smartalco]

what you want is Javascript, you would want something like this in the head of your html page

<script type="text/javascript">function showmenu(elmnt){	document.getElementById(elmnt).style.visibility="visible"}function hidemenu(elmnt){	document.getElementById(elmnt).style.visibility="hidden"}</script>

and then something like this on the element

<div id="menu1" onmouseover="showmenu('menu1')" onmouseout="hidemenu('menu1')">

experiment with it a bit and you will eventually get it (actually the 'onmouseout' part should probably be on the submenus... and each 'onmouseover' should probably hide the rest of the submenus, to make sure it is the only one up)

[Ingolme]

You can do it with CSS like this:HTML:

<div id="menubutton">Menu item  <ul>	<li>Submenu item</li>	<li>Submenu item</li>	<li>Submenu item</li>  </ul></div>

CSS:

#menubutton ul {display: none;}#menubutton:hover ul {display: block;}

[rzea]

There are PLENTY of tutorials out there, some use Javascript and some don't, it's up to you to decide what to use, either way you're good since the vast majority of browsers, even people with the old IE6 (which is still EXTREMELY used today), have Javascript enabled.Here are several links that will get you started:http://www.noupe.com/css/multilevel-drop-d...-tutorials.htmlhttp://qrayg.com/learn/code/cssmenus/http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htmhttp://www.alvit.de/css-showcase/css-navig...es-showcase.phphttp://tutorials.alsacreations.com/modelesmenus/The code Ingolme shows does not work in IE6, nonetheless, is something very simple to implement and escalate, so if you're not worried about IE6, you're good to go with that code.

[Matt5581]

Thanks for your help all. I'm constructing one now.Those are great tutorials, Ricardo Zea. I'll give those a look see.

[rzea]

As I said above, Ingolme's code is the starting point for what you need, however, it does not work in IE6, but if you don't mind that, then use that.Also... take a look at the links I gave you, you have the solution in front of your nose, just look around the examples.