mywebstuff : CSS Example 07

Pure CSS Drop Down Menus (well with javacript for ie) - Mainly based on the Suckerfish code from www.alistapart.com. I changed a few minor things because I wanted the drop down menu to be a different size from the top level menu title. I also required the top level menu titles to be links. Getting the thing to work in a dumb browser like IE requires the javascript hack because IE can only hover on links. Arrgghhh.

Note: 2005-02-15. I have removed the CDATA tags from the javascript that alistapart used. They do not need to be there. The javascript tags are valid for xhtml 1.1. Thanks Ruth for pointing that out.

Mouseover the links below for demo.

The whole javascript thing is a thorny subject because an estimated 10 percent of internet users have it deactivated which means the menus do not work in IE for them whatever. Dumb browser. This menu has been tested and found to function on newer versions of IE6 (with javascript), Opera, OSX Safari, Mozilla (Win) and Mozilla 1.4.1 (Fedora Linux). I have not tested other browser versions, nor will I. If it does not work with them they are probably do not conform to the web standards for CSS or have not implemented enough of it.

Javascript drop down menus or CSS drop down menus? Personally I am a for the CSS approach because it is simplier and cleaner to code - However, professionel Javascript or DHTML drop down menus are generally programmed for backward compatability with older browers and also take into consideration client sided problems such as drop down menus that are longer then can be displayed on the screen. If the menu data is being held in an externally linked javascript file then it can be used for all pages on the site which makes maintainance simply if the source must be changed. Also many people do not have a shimmering idea about writing DHTML or CSS and use WYSIWYG software which produces the menus and structure for them.

Javascript menus do seem to offer many advantages, however:

Source code for HTML menu

<ul class="topmenu" id="dmenu">
	<li class="topmenuli"><a href="" class="topmenutitle">Home</a>
	<ul class="submenuul">
		<li class="submenuli"><a href="">Frequently ...</a></li>
		<li class="submenuli"><a href="">Impressum ...</a></li>
		<li class="submenuli"><a href="">Links ...</a></li>
		<li class="submenuli"><a href="">Sitemap ...</a></li>
	</ul>

	</li>

	<li class="topmenuli"><a href="" class="topmenutitle">Perl</a>

	<ul class="submenuul">
		<li class="submenuli"><a href="">Trees, ...</a></li>
		<li class="submenuli"><a href="">Perl ...</a></li>
		<li class="submenuli"><a href="">XML ...</a></li>
		<li class="submenuli"><a href="">XML ...</a></li>
	</ul>

	</li>

	<li class="topmenuli"><a href="" class="topmenutitle">SVG</a>

	<ul class="submenuul">
		<li class="submenuli"><a href="">Interactive ...</a></li>
		<li class="submenuli"><a href="">Basic ...</a></li>
		<li class="submenuli"><a href="">Interactive ...</a></li>
		<li class="submenuli"><a href="">Animated ...</a></li>
		<li class="submenuli"><a href="">Clipart ...</a></li>
	</ul>

	</li>
</ul>


<div class="content">

The css here contains the absolute minimum so the drop down menus function.

<style type="text/css">
<!--

/* minimum menu requirements for functionality */

.topmenuul{
	list-style-type:none;
	margin:0;
	padding:0;
}

.topmenuli{
	list-style-type:none;
	float:left;
}

.topmenutitle{
	display:block;
	width:100px;
}

.submenuul{
	list-style-type:none;
	position:absolute;
	margin: 0;
	padding:0;
	display:none;
}

.submenuli a{
	display:block;
	width:250px;
}

li:hover ul , li.over ul{ /* lists nested under hovered list items */
	display: block;
}

#dmenu li>ul { 
	top: auto;
	left: auto;
}

#content {
	clear: left;

}
-->
</style>

And a bit css to make them look nice.

/* menu design */

#dmenu {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size:12px;
}

.topmenuul {
	
}

.topmenutitle {
	text-indent:3px;
	text-decoration: none;
	border:1px solid #000000;
	padding:3px;
	line-height:14px;
}

.submenuul {
	margin-top:-1px;
	background-color:#E7F7FF;
	background-position: top left;
	background-repeat: repeat-x;
	border-top:1px solid #000000;
	border-bottom:2px solid #000000;
	border-right:2px solid #000000;
	border-left:7px solid #FF0000;

}

.submenuli a{
	padding:3px;
	text-decoration: none;
	color: #000000;

}

.submenuli a:hover{
	text-decoration: none;
	background:#336699;
	color: #FFFFFF;
}

And for the sad souls worrying about IE users, you will need to insert this javascript into the HTML. At least if they have javascript deactivated then the top level links will work. If you need browsers that need javascript: Right click to view the source code.


<script type="text/javascript">

startList = function() {
	if (document.all && document.getElementById) {
		navRoot = document.getElementById("dmenu");
		for (i=0; i < navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}

window.onload=startList;
//-->
</script>

Valid XHTML 1.1! Valid CSS