CSS Drop Down Menu

•

What is DaniWeb IT Discussion Community?

You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 363,442 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,186 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our HTML and CSS advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 758 | Replies: 1

•

Join Date: Sep 2007

Posts: 6

Reputation: becraig is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

becraig

Offline

Newbie Poster

CSS Drop Down Menu

Apr 21st, 2008

I am trying to get a two level drop down menu to work I am using the suckerfish example but running into a problem. I want the top level to remain the same throughout w/o changing any background etc.

The problem I am having I cant seem to line up the level 2 and level 3 menus

Help with Code Tags

(Toggle Plain Text)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
<title>Suckerfish Dropdowns - Two Level Bones</title>


<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>

<style type="text/css">

body {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 10px;	color: #FFFFFF;}	


#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display: block;
	width: 10em;
	height:20px;}

#nav li { /* all list items */
	float: left;
	width: 10em; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
	position: absolute;
	background: orange;
	width: 10em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li ul ul { /* third-and-above-level lists */
	margin: -1em 0 0 10em;
}

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

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

#content {
	clear: left;
	color: #ccc;
}

</style>
</head>

<body><table cellpadding="0" cellspacing="0" border="0">
<td align="left">
<ul id="nav">

	<li>	<a href="http://www.royalbetcasino.com/sportsbook/" target="_self" title="Sportsbook Lines"><img src="http://royalbetcasino.com/nulook/images/lines_menu.gif" border="0" /></a>
							
<ul>
	<li><a href=" " target="Main" title="">Level II</a>
<ul>							

	<li><a href=" " target="Main" title="">Link 1</a></li>
	<li><a href=" " target="Main" title="">Link 2</a></li>
	<li><a href=" " target="Main" title="">Link 3</a></li>
	<li><a href=" " target="Main" title="">Link 4</a></li>
	<li><a href=" " target="Main" title="">Link 5</a></li>
	<li><a href=" " target="Main" title="">Link 6</a></li>
	<li><a href=" " target="Main" title="">Link 7</a></li>
	<li><a href=" " target="Main" title="">Link 8</a></li>
</ul>
								
</li>
		

	<li><a href=" " target="Main" title="">Level II</a>
<ul>							

	<li><a href=" " target="Main" title="">Link 1</a></li>
	<li><a href=" " target="Main" title="">Link 2</a></li>
	<li><a href=" " target="Main" title="">Link 3</a></li>
	<li><a href=" " target="Main" title="">Link 4</a></li>
	<li><a href=" " target="Main" title="">Link 5</a></li>
	<li><a href=" " target="Main" title="">Link 6</a></li>
	<li><a href=" " target="Main" title="">Link 7</a></li>
	<li><a href=" " target="Main" title="">Link 8</a></li>
</ul>
								
	</li>
		

	<li><a href=" " target="Main" title="">Level II</a>
<ul>							

	<li><a href=" " target="Main" title="">Link 1</a></li>
	<li><a href=" " target="Main" title="">Link 2</a></li>
	<li><a href=" " target="Main" title="">Link 3</a></li>
	<li><a href=" " target="Main" title="">Link 4</a></li>
	<li><a href=" " target="Main" title="">Link 5</a></li>
	<li><a href=" " target="Main" title="">Link 6</a></li>
	<li><a href=" " target="Main" title="">Link 7</a></li>
	<li><a href=" " target="Main" title="">Link 8</a></li>
</ul>
</li>

		</ul>
	</li>

</ul>

</td></table>
</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
<title>Suckerfish Dropdowns - Two Level Bones</title>


<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>

<style type="text/css">

body {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 10px;	color: #FFFFFF;}	


#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display: block;
	width: 10em;
	height:20px;}

#nav li { /* all list items */
	float: left;
	width: 10em; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
	position: absolute;
	background: orange;
	width: 10em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li ul ul { /* third-and-above-level lists */
	margin: -1em 0 0 10em;
}

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

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

#content {
	clear: left;
	color: #ccc;
}

</style>
</head>

<body><table cellpadding="0" cellspacing="0" border="0">
<td align="left">
<ul id="nav">

	<li>	<a href="http://www.royalbetcasino.com/sportsbook/" target="_self" title="Sportsbook Lines"><img src="http://royalbetcasino.com/nulook/images/lines_menu.gif" border="0" /></a>
							
<ul>
	<li><a href=" " target="Main" title="">Level II</a>
<ul>							

	<li><a href=" " target="Main" title="">Link 1</a></li>
	<li><a href=" " target="Main" title="">Link 2</a></li>
	<li><a href=" " target="Main" title="">Link 3</a></li>
	<li><a href=" " target="Main" title="">Link 4</a></li>
	<li><a href=" " target="Main" title="">Link 5</a></li>
	<li><a href=" " target="Main" title="">Link 6</a></li>
	<li><a href=" " target="Main" title="">Link 7</a></li>
	<li><a href=" " target="Main" title="">Link 8</a></li>
</ul>
								
</li>
		

	<li><a href=" " target="Main" title="">Level II</a>
<ul>							

	<li><a href=" " target="Main" title="">Link 1</a></li>
	<li><a href=" " target="Main" title="">Link 2</a></li>
	<li><a href=" " target="Main" title="">Link 3</a></li>
	<li><a href=" " target="Main" title="">Link 4</a></li>
	<li><a href=" " target="Main" title="">Link 5</a></li>
	<li><a href=" " target="Main" title="">Link 6</a></li>
	<li><a href=" " target="Main" title="">Link 7</a></li>
	<li><a href=" " target="Main" title="">Link 8</a></li>
</ul>
								
	</li>
		

	<li><a href=" " target="Main" title="">Level II</a>
<ul>							

	<li><a href=" " target="Main" title="">Link 1</a></li>
	<li><a href=" " target="Main" title="">Link 2</a></li>
	<li><a href=" " target="Main" title="">Link 3</a></li>
	<li><a href=" " target="Main" title="">Link 4</a></li>
	<li><a href=" " target="Main" title="">Link 5</a></li>
	<li><a href=" " target="Main" title="">Link 6</a></li>
	<li><a href=" " target="Main" title="">Link 7</a></li>
	<li><a href=" " target="Main" title="">Link 8</a></li>
</ul>
</li>

		</ul>
	</li>

</ul>

</td></table>
</body>

</html>

The code is listed above can anyone help me pleeeeeeaaasssseeee.

Last edited by peter_budo : Apr 21st, 2008 at 3:35 am. Reason: Just rearanging code as it was stretched all-over