CSS Dropdown Menus

I developed this after failing to find a generic dropdown menu CSS file online. To use it, simply mark a container as class="dropmenu". It integrates very well with Joomla 1.5.14, since that's what I developed it for. Note that there are lots of hard-coded constants in this code. The second snippet can be placed in the same file, or in a separate file for IEv7.

Tested with: FF 3.5, AS 4.1, GC 2, IE7
Known Issues:
* the menu items don't select properly in IE7. Minor in effect.
* submenu items don't align properly in IE7.

/* the menu as a whole */
.dropmenu > .menu {
	padding:			0;
	margin:				0;
	height:				29px;
	position:			relative;
	z-index:			500;
}

/* all menu items in the menu */
.dropmenu > .menu li {
	float:				left;
	min-width:			50px;
	height:				29px;
	color:				white;
	text-align:			center;
	line-height:		29px;
	margin-right:		1px;
	z-index:			200;
	list-style:			none;
}

/* Style the content of the menus */
.dropmenu > .menu li > * {
	float:				left;
	width:				100%;
	height:				29px;
	line-height:		29px;
}

.dropmenu > .menu li a {
	color:				inherit;
	text-decoration:	none;
}

/* first level menus only */
.dropmenu > .menu > li > * {
	width:				auto;
	padding:			0 25px 0 20px;
}

/* both active elements and hover */
.dropmenu > .menu li:hover, .dropmenu .menu li.active {
	position:			relative;
	background:			#4A95B5;
}

/* active elements */
.dropmenu .menu li.active {
	color:				black;
}

/* hover elements */
.dropmenu > .menu li:hover {
	color:				white;
}

/* dropdown menus */
.dropmenu > .menu li.parent > ul {
	position:			absolute;
	left:				-9999px;
	top:				-9999px;
	width:				0;
	height:				0;
	margin:				0;
	padding:			0;
	list-style:			none;
}

/* further dropdown menus */
.dropmenu > .menu li.parent:hover > ul {
	left:				120px;
	top:				0;
}

/* showing first-level dropdown menus */
.dropmenu > .menu > li.parent:hover > ul {
	left:				0;
	top:				29px;
}

/* dropdown menu items */
.dropmenu > .menu li.parent > ul > li {
	background:			#dde3e4;
	border:				1px solid #BEC9CB;
	min-width:			120px;
	color:				black;
}

/* hovered dropdown menu item */
.dropmenu > .menu li.parent > ul > li:hover {
	background:			#BEC9CB;
}

.dropmenu > .menu li a {
	color:				white;
}

.dropmenu .menu li.active a {
	color:				black;
}

.dropmenu > .menu li:hover a {
	color:				white;
}

.dropmenu > .menu li.parent > ul > li a {
	color:				black;
}

This posting has no comments.

This member is at his first posting.