Drop Down List with a Button

[gj2009]

Can someone provide me with the codes for a drop down list to add to my website?

[htmlbasictutor]

The SELECT, OPTGROUP, and OPTION elements

HTML Forms and Input - there are some examples of drop downs at bottom of page.

[gj2009]

Originally Posted by htmlbasictutor

The SELECT, OPTGROUP, and OPTION elements

HTML Forms and Input - there are some examples of drop downs at bottom of page.

I'm after a menu that also provides links to the selected options.

[htmlbasictutor]

Did you look through the CSSPlay website?

[WebDizajnSajter]

gj2009,

I just design web site for architectural studio, and they ask me for creating horizontal drop down navigational menu. It consists of css, html and js, javascript is needed because of IE 6 bugs. If you want to change text in navigational menu once to be changed on every web page you need and php script as well.

Js script file embed in the head of web page. Here is the code

Css

#nav, 
#nav ul { /* all lists */
	padding: 5px;
	margin: 0 10px 10px 0;
	list-style: none;
	float : left;
	background: transparent;
	width: 140px;
}
	
#nav li { /* all list items */
	position : relative;
	float : left;
	margin-bottom: 3px;
	width: 200px;
}
	
#nav li ul { /* second-level lists */
	position : absolute;
	left: -999em;
	margin-top : -27px;
	margin-left : 160px
}
	
	
#nav li a {
/*    width: 150px;*/
	display : block;
	color: #FFFFFF;
	text-decoration : none;
	background: transparent;
	padding: 4px 10px 4px 7px;
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
/*	border: 1px solid #FFFFFF;*/
}
	
#nav li a:hover {
	color: #FFCC00;
    background: transparent;
	font-weight: bold;
}
	
#nav li:hover ul, 
#nav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

Html

<ul id="nav">
      <li><a href="http://www.v7n.com/forums/home.html">Home deep house</a></li>
	  <li><a href="projekti.html">Projekti deep house</a></li>
	  <li><a href="stanovi/stanovi.html">Stanovi</a>
	    <ul>
		  <li><a href="stanovi/minimalizam-kao-princip-stan.html">Minimalizam kao princip</a></li>
		  <li><a href="stanovi/prostor-bez-kanona-stan.html">Prostor bez kanona</a></li>
		  <li><a href="stanovi/studentski-stan.html">Studentski stan</a></li>
		</ul>
	  </li>
    </ul>

Js

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

[gj2009]

This is fantastic! Many thanks WebDizajnSajter