Forums

dhanediesil

Hello All,

I'm working on a new site and I'm having problems getting the drop down menus to work. Here's my code before I get into the problem:

HTML



<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">

<head>
	
	<meta http-equiv=\"Content-Type\" content=\"text/html; charset=ISO-8859-1\" />
	<meta name=\"description\" content=\"The official site of Hollywood's Magical Island Catalina.\">
	<meta name=\"keywords\" content=\"greg reitman, the green producer, hollywood, los angeles, blue water entertainment, green tips, fields of fuel, hollywoods magical island catalina, blue water company, los angeles producer, la producer, rooted in peace, stars cars guitars, on the green carpet, the environmentalist, green correspondent\">
	<title>Hollywood's Magical Island Catalina | a GREG REITMAN film</title>
	<link rel=\"stylesheet\" type=\"text/css\" href=\"styles.css\" />
	

</head>

<body>

	<div id=\"page\">
	
	<div id=\"wrap\">
			
			<div id=\"header\">
				
				<a href=\"index.html\" border=\"0\" title=\"Home\"><img src=\"images/logo.jpg\" /></a>
				
				<ul id=\"nav\">
					
						<li id=\"nav-home\"><a href=\"index.html\">HOME</a></li>
						<li id=\"nav-about\"><a href=\"#\">ABOUT</a>
							<ul>
			      			<li class=\"sub\"><a href=\"#\">SYNOPSIS</a></li>
			      			<li class=\"sub\"><a href=\"#\">TEAM</a></li>
			      			<li class=\"sub\"><a href=\"#\">CONTACT</a></li>
							</ul>
						</li>
						<li id=\"nav-screening\"><a href=\"#\">SCREENING</a>
							<ul>
			      			<li class=\"sub\"><a href=\"#\">BOOKINGS</a></li>
							</ul>
						</li>
						<li id=\"nav-journal\"><a href=\"#\">JOURNAL</a>
							<ul>
				   			<li class=\"sub\"><a href=\"#\">MEMORIES LOG</a></li>
							</ul>
							</li>
						<li id=\"nav-media\"><a href=\"#\">MEDIA</a>
							<ul>
			      			<li class=\"sub\"><a href=\"#\">PHOTOS</a></li>
			      			<li class=\"sub\"><a href=\"#\">ARTICLES</a></li>
			      			<li class=\"sub\"><a href=\"#\">VIDEO</a></li>
							<li class=\"sub\"><a href=\"#\">RADIO</a></li>
							</ul>
						</li>
						<li id=\"nav-partners\"><a href=\"#\">PARTNERS</a>
							<ul>
				   			<li class=\"sub\"><a href=\"#\">PARTNERS</a></li>
			     			<li class=\"sub\"><a href=\"#\">AFFILIATES</a></li>
							</ul>
	     					</li>
					</ul>
					
				</div><!--END nav-->
				
			</div><!--END header-->
			
			<div id=\"content\">
				
				<div id=\"crest\"></div><!--END crest-->
				
				<div id=\"flash\">
					
				</div><!--END flash-->
				
				<div id=\"trailer\">
					
					<div id=\"movie\">
						
						<OBJECT classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' width=\"320\"
						        height=\"255\" codebase='http://www.apple.com/qtactivex/qtplugin.cab'>
						        <param name='src' value=\"hmi-trailer-high.mov\">
						        <param name='autoplay' value=\"true\">
						        <param name='controller' value=\"true\">
						        <param name='loop' value=\"true\">
						        <EMBED src=\"hmi-trailer-high.mov\" width=\"320\" height=\"255\" autoplay=\"false\" 
						        controller=\"true\" loop=\"true\" pluginspage='http://www.apple.com/quicktime/download/'>
						        </EMBED>
						        </OBJECT>
						
						
					</div><!--END movie-->
					
				</div><!--END trailer-->
				
				<div id=\"credits\">
					
					<img src=\"images/credits.jpg\" />
					
				</div><!--END credits-->
			
			</div><!--END content-->
			
			<div id=\"footer\">
				
			</div><!--END footer-->
			
		</div><!--END wrap-->
		
		</div><!--END page-->
		

</body>
</html>

CSS


/*RESETS & BASIC PAGE SETUP*/

*{
	margin: 0;
	padding: 0;
}

html{
	overflow-y: scroll;
}

body{
	font: 62.5% Helvetica, Arial, Verdana, Geneva, sans-serif;
	background: #057eb7;
}

ul{
	list-style: none inside;
}

p{
	font-size: 1.2em;
	line-height: 1.3em;
	margin-bottom: 1.2em;
}

a{
	outline: none;
	color: #999999;
}

a img{
	border: none;
}

/*END RESET*/

/*PAGE STRUCTURE */

div#page{
	width: 960px;
	margin: 0 auto;
	background: #ffffff;
}

div#wrap{
	margin: 0 auto;
}

	/*HEADER*/
	
	div#header{
		width: 949px;
		margin: 0 auto;
	}
	
		/*NAV*/
	
	ul#nav{
		width: 949px;
		height: 47px;
		margin: 0 auto;
		}
		ul#nav li{
			display: inline;
			}
			ul#nav li a{
				display: block;
				height: 47px;
				text-indent: -9999px;
				float: left;
				}
				ul#nav li#nav-home a{
					width: 154px;
					background: url(images/nav-home.jpg) bottom center no-repeat;	
				}
				ul#nav li#nav-about a{
					width: 129px;
					background: url(images/nav-about.jpg) bottom center no-repeat;	
				}
				ul#nav li#nav-screening a{
					width: 200px;
					background: url(images/nav-screening.jpg) bottom center no-repeat;	
				}
				ul#nav li#nav-journal a{
					width: 153px;
					background: url(images/nav-journal.jpg) bottom center no-repeat;	
				}
				ul#nav li#nav-media a{
					width: 118px;
					background: url(images/nav-media.jpg) bottom center no-repeat;	
				}
				ul#nav li#nav-partners a{
					width: 195px;
					background: url(images/nav-partners.jpg) bottom center no-repeat;	
				}
			ul#nav li#nav-home a:hover{
				background-position: top center;
			}
			ul#nav li#nav-about a:hover{
				background-position: top center;
			}
			ul#nav li#nav-screening a:hover{
				background-position: top center;
			}
			ul#nav li#nav-journal a:hover{
				background-position: top center;
			}
			ul#nav li#nav-media a:hover{
				background-position: top center;
			}
			ul#nav li#nav-partners a:hover{
				background-position: top center;
			}
		ul#nav li ul{
			display: none;
  			position: absolute;
			}
			ul#nav li:hover ul{ 
				display: block;
				border: 1px solid #057eb7;
				background: #ffffff;
				text-align: center;
			}
			
		/*END NAV*/
		
	/*END HEADER*/
	
	/*CONTENT*/
	
	div#crest{
		width: 949px;
		height: 136px;
		background: url(images/crest.jpg);
	}
	
	div#trailer{
		width: 949px;
		height: 741px;
		background: url(images/trailerbg.jpg);
		}
		div#trailer div#movie{
			width: 350px;
			height: 270px;
			float: right;
			padding: 100px 50px 0 0;
		}
	
	div#credits{
		width: 949px;
		height: 316px;
	}
	
	/*END CONTENT*/

/*END STRUCTURE & STUFF*/

Here's the problem:

My hover state is working, but the "li" in the "ul" that contains the drop down menu isn't working. It keeps repeating the background image of the root "li" when it should be showing the drop down menu with the links. Not the same repeated image. Here's a link where you can view it for yourself: http://www.hollywoodisle.com/test. I've been working on this problem for the last day and a half. Any help would be greatly appreciated.

Peace,
Dhane Diesil

chriscoyier

I was trying to figure this out and it was wracking my brain so I had to let it go... One thing though, it reminds me of the superfish menus sort of. Check this out:

http://users.tpg.com.au/j_birch/plugins ... /#examples

Check out the "Examples" then the "Nav Bar Example".

Perhaps starting there and altering to fit your look would be easier?

dhanediesil

Chris,

I appreciate it. It was racking my brain too. But thanks once again for taking a look at it!

Peace

Cotton

What's up with sneakersupplier spamming all the forums. Hopefully links are set to nofollow.

siva

Good think,I try to solve this problem

treehouse : what would you like to learn today?

Forums

Drop down menu problem...Please help