Drop Down Menu (Multi-level)

**GOLFnTours.com - Francis** · 10-22-2008, 03:51 PM

Would anyone help with script on adding a second level drop down menu?

I have the first level menu (for names of countries) done alright; courtesy of scripts from Dynamic Drive (Hover over 'Golf Courses' on top menu bar on www GOLFnTours com).

I need the second level for the name of the cities for the various countries listed on the first level.

Dynamic Drive has provided some urls for help on the multi-levels but I am really not a Java person; the script looks Greek to me.

I believe with the first level done right, adding the second level should not be too difficult if one is more familiar with Java.

Would any guru out there help?
Thanks

**Nile** · 10-22-2008, 09:19 PM

I'd say that this shouldn't be that hard to switch menus, try a different menu. I'm sure this one will fit your needs:
http://www.dynamicdrive.com/style/cs...rizontal_blue/

**jscheuer1** · 10-22-2008, 09:44 PM

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

You might also want to consider other Dynamic Drive Menus from this index:

http://www.dynamicdrive.com/dynamicindex1/indexc.html

**TheJoshMan** · 10-22-2008, 10:03 PM

You could just as easily use css to accomplish this.

The CSS:

Code:

* {
	margin:0;
	padding:0;
}

body {
	background:#151515;
	font-family:tahoma, arial, verdana, sans-serif;
	color:#ababab;
	font-size:13px;
}

#nav, #nav ul {
	height:34px;
	background:#7a7a7a;
	float: left;
	width: auto;
	list-style: none;
	line-height: 1;
	font-weight: bold;
	padding: 0;
	margin: 50px 0 0 50px;
	position:relative;
}
#nav {
	padding: 0 25px;
}

#nav a {
	display: block;
	width: auto;
	color: #303030;
	text-decoration: none;
	padding: 0 25px;
	line-height:34px;
}
#nav a:hover{
	color:#151515;
}


#nav li {
	float: left;
	padding: 0;
	width: auto;
}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width:185px;
	font-weight: normal;
	border-width: 0;
	margin: 0;
	background:#adadad;
}

#nav li li {
	padding:0 15px 0 0;
	width: auto;
}

#nav li ul a {
	width: 120px;
}

#nav li ul ul {
	margin: -34px 0 0 185px;
}

#nav li:hover, #nav li.ieHover {
	background: #adadad;
}

#nav li ul li:hover, #nav li ul li.ieHover{
	background:#fff;
}



/*===============================DO NOT EDIT BEYOND HERE====================================*/

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

The HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title> Strictly CSS Menubar </title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <meta name="generator" content="EditPlus 3">
  <meta name="author" content="Josh Jones">
  <link rel="stylesheet" type="text/css" href="nav-style.css">
		<!--[if IE]>
		 <style type="text/css">
			#cmd li ul {
				background:#a5a5a5;
			}
		 </style>
		<![endif]-->
 </head>
 <body>
<ul id="nav"> 
	<li><a href="#">United States</a>
		<ul> 
			<li><a href="#">Alabama</a>
				<ul>
					<li><a href="#">Birmingham</a></li>
					<li><a href="#">Mobile</a></li>
					<li><a href="#">Montgomery</a></li>
					<li><a href="#">Huntsville</a></li>
					<li><a href="#">Tuscaloosa</a></li>
				</ul>
			</li>
			<li><a href="#">Alaska</a>
				<ul>
					<li><a href="#">Anchorage</a></li>
					<li><a href="#">Fairbanks</a></li>
					<li><a href="#">Juneau</a></li>
				</ul>
			</li>
			<li><a href="#">Arizona</a>
				<ul>
					<li><a href="#">Kingman</a></li>
					<li><a href="#">Mesa</a></li>
					<li><a href="#">Phoenix</a></li>
					<li><a href="#">Quartzsite</a></li>
					<li><a href="#">Tempe</a></li>
					<li><a href="#">Tucson</a></li>
					<li><a href="#">Yuma</a></li>
				</ul>
			</li>
			<li><a href="#">Arkansas</a>
				<ul>
					<li><a href="#">Bentonville</a></li>
					<li><a href="#">Fayetteville</a></li>
					<li><a href="#">Fort Smith</a></li>
					<li><a href="#">Little Rock</a></li>
					<li><a href="#">Texarkana</a></li>
					<li><a href="#">West Memphis</a></li>
				</ul>
			</li>
		</ul> 
	</li>
	<li><a href="#">Some Coutnry</a></li>
	<li><a href="#">Some Other Country</a></li>
	<li><a href="#">Another Country</a></li>
</ul> 
<script type="text/javascript" src="http://www.eight7teen.com/freebies/ieHover.js"></script>
 </body>
</html>

Working Model: http://eight7teen.com/freebies/state-menu.html

Thread: Drop Down Menu (Multi-level)

Thread Tools

Search Thread

Drop Down Menu (Multi-level)

Bookmarks

Bookmarks

Posting Permissions