Dropdown Menu System Functionality

By default, the dropdown menu system stylesheet is enabled, because it doesn't need to have sub-menus to operate properly and it looks great (in my humble opinion). The specific details of the technique are rather complicated and beyond the scope of this demonstration. However, the actual css code has quite a few comments explaining the different classes so that you can easily modify them to your liking. If you don't want dropdown functionality, just remove the line that imports it in your webpages. Below is a demo page designed to show and explain the different options that the dropdown stylesheet provides. This technique was inspired by Patrick Griffiths' Son of Suckerfish Dropdowns.

Dropdown Menu Demo

---

Relevant HTML

<ul id="navigationUL">
	<li class="noArrow"><a href="index.html" class="home">Home</a></li>
	<li><a href="club/index.html" class="club">Rock Club</a>
		<ul class="noArrow">
			<li><a href="club/meetings.html">Meetings</a></li>
			<li><a href="club/join.html">How To Join</a></li>
			<li><a href="club/officers.html">Current Officers</a></li>
		</ul>
	</li>
</ul>

Relevant CSS

/*------------------------------------------------------------*/
/* Override previous styles when dropdowns are used.          */
/*------------------------------------------------------------*/

.navigationPadding
{
	padding:0;
}

#navigation ul
{
	padding:0;
}

#navigation ul ul
{
	padding:0;
}

#navigation a:hover
{
	text-decoration:none;
}

/*------------------------------------------------------------*/
/* Styling and mechanics for dropdowns.                       */
/*------------------------------------------------------------*/

#navigationUL, #navigationUL ul
{
	float:left;
	width:200px;
	list-style:none;
}

#navigationUL ul
{
	background:url(../images/highLines.png);
}

#navigationUL li
{
	position:relative;
	float:left;
	width:200px;
}
	
#navigationUL li ul
{
	margin-left:200px;
	position:absolute;
	top:0;
	left:-999em;
}
	
#navigationUL li ul ul
{
	left:-999em;
}
	
#navigationUL li a
{
	padding:0.5em 10px;
	display:block;
	width:180px;
	font-size:1.2em;
	font-weight:bold;
	color:#fff;
	text-decoration:none;
}

#navigationUL li a:hover
{
	background:url(../images/arrow.gif) 100% 50% no-repeat #5d5d5d;
}

#navigationUL li:hover ul ul, #navigationUL li:hover ul ul ul, #navigationUL li.sfhover ul ul, #navigationUL li.sfhover ul ul ul
{
	left:-999em;
}

#navigationUL li:hover ul, #navigationUL li li:hover ul, #navigationUL li li li:hover ul, #navigationUL li.sfhover ul, #navigationUL li li.sfhover ul, #navigationUL li li li.sfhover ul
{
	left:auto;
}

#navigationUL .noArrow a:hover
{
	background:#5d5d5d;
}

/*------------------------------------------------------------*/
/* Additional styles for #navigation when dropdowns are used. */
/*------------------------------------------------------------*/

.navigationInnerPadding
{
	padding:10px;
}

#navigation .navigationInnerPadding a:hover
{
	text-decoration:underline;
}

---

« Back to Functionality Index