[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 122
  • Last Modified:

How do I make this menu happen?

Head out to http://www.countryshowdown.com/Chevron

The first pulldown menu is perfect. Second one, the one entitled, "Contestants" is where I'm having fits.

When you click on "Contestants," and then mouse over the "Contest Locations" link, you get a big, 537 px block. Problem is, I want that block to be displayed when you click on "Contestants." I don't want the user to have to drill down to get that block.

How do I do that?

My html and my css are attached.
CSS


body {
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 12px;
	color: #000000;
	text-align: center;
	vertical-align: top;
	padding: 0px;
	height: 100%;
	width: 100%;
	margin: 0;
	background-image: url(images/tile.gif);	
}

td {
font-family: Verdana, Microsoft Sans Serif;
	font-size: 12px;
	color: #000000;
	text-align: left;
}

td.top_header {
	text-align: center;
}

td.marquee_holder {
	font-size: 1px;
}

td.marquee {
font-family: Verdana, Microsoft Sans Serif;
	font-size: 10px;
	color: #000000;
	text-align: left;
	width:935;
}

td.background {
background-image: url(images/filler_huge.jpg);	
background-repeat: repeat-x;
text-align: center;
}

td.tray {
width: 950px;
}

.login_box{
  background-image:url('images/text_field.jpg');
  border:0px;
  width:109px;
  height:21px;
  font-size: 12px;
  color: #b1a18f;
}

form {
      display: inline;
	  margin-top: 2px;
	  margin-bottom: 0;
}

A.marquee
{
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 10px;
	color: #000000;
	text-decoration:underline;
}

A.marquee:Hover {
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 10px;
	color: #000000;
	text-decoration:underline;
}

A.marquee:Visited {
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 10px;
	color: #000000;
	text-decoration:underline;
}

#nav {
		margin: 0;
		padding: 0px 6px 0;
		background: #000000;
		width: 938px;
		height:26px;
		}
	
	#nav li {
		height: 25px;
		margin: 0 5px;
		padding: 0 0 0px;
		display: block;
		float: left;
		position: relative;
		list-style: none;
	}

/* main level link */
	#nav a {
		font-weight: bold;
		color: #e7e5e5;
		text-decoration: none;
		display: block;
		padding:  3px 20px;
		margin: 0;
		height: 20px;
	}
	#nav a:hover {
		background: #000;
		color: #fff;
	}

	/* main level link hover */
	#nav .current a, #nav li:hover > a {
		background: #000000;
		color: #ffffff;
	}

	/* sub levels link hover */
	#nav ul li:hover a, 
	#nav li:hover li a {
		background: none;
		border: none;
		color: #666;
	}
	#nav ul a:hover {
		background: #000000;
		color: #000000 !important;
	}

	/* dropdown */
	#nav li:hover > ul {
		display: block;
	}
	
	/* level 2 list */
	#nav ul {
		display: none;
		margin: 0;
		padding: 0;
		width: 200px;
		position: absolute;
		top: 26px;
		left: 0;
		background: #ffffff;
	}
	
		#nav ul li {
		float: none;
		margin: 0;
		padding: 0;
	}

	#nav ul a {
		font-weight: normal;
		text-shadow: 0 1px 0 #fff;
	}

	/* level 3+ list */
	#nav ul ul {
		left: 200px;
		top: 0px;
	}

	/* clearfix */
	#nav:after {
		content: ".";
		display: block;
		clear: both;
		visibility: hidden;
		line-height: 0;
		height: 0;
	}
	#nav {
		display: block;
	}
	
	
	#facebook ul {
		display: none;
		margin: 0;
		padding: 0;
		width: 537px;
		position: absolute;
		top: 26px;
		left: 0;
		background: #ffffff;
	}

Open in new window

CSS


body {
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 12px;
	color: #000000;
	text-align: center;
	vertical-align: top;
	padding: 0px;
	height: 100%;
	width: 100%;
	margin: 0;
	background-image: url(images/tile.gif);	
}

td {
font-family: Verdana, Microsoft Sans Serif;
	font-size: 12px;
	color: #000000;
	text-align: left;
}

td.top_header {
	text-align: center;
}

td.marquee_holder {
	font-size: 1px;
}

td.marquee {
font-family: Verdana, Microsoft Sans Serif;
	font-size: 10px;
	color: #000000;
	text-align: left;
	width:935;
}

td.background {
background-image: url(images/filler_huge.jpg);	
background-repeat: repeat-x;
text-align: center;
}

td.tray {
width: 950px;
}

.login_box{
  background-image:url('images/text_field.jpg');
  border:0px;
  width:109px;
  height:21px;
  font-size: 12px;
  color: #b1a18f;
}

form {
      display: inline;
	  margin-top: 2px;
	  margin-bottom: 0;
}

A.marquee
{
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 10px;
	color: #000000;
	text-decoration:underline;
}

A.marquee:Hover {
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 10px;
	color: #000000;
	text-decoration:underline;
}

A.marquee:Visited {
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 10px;
	color: #000000;
	text-decoration:underline;
}

#nav {
		margin: 0;
		padding: 0px 6px 0;
		background: #000000;
		width: 938px;
		height:26px;
		}
	
	#nav li {
		height: 25px;
		margin: 0 5px;
		padding: 0 0 0px;
		display: block;
		float: left;
		position: relative;
		list-style: none;
	}

/* main level link */
	#nav a {
		font-weight: bold;
		color: #e7e5e5;
		text-decoration: none;
		display: block;
		padding:  3px 20px;
		margin: 0;
		height: 20px;
	}
	#nav a:hover {
		background: #000;
		color: #fff;
	}

	/* main level link hover */
	#nav .current a, #nav li:hover > a {
		background: #000000;
		color: #ffffff;
	}

	/* sub levels link hover */
	#nav ul li:hover a, 
	#nav li:hover li a {
		background: none;
		border: none;
		color: #666;
	}
	#nav ul a:hover {
		background: #000000;
		color: #000000 !important;
	}

	/* dropdown */
	#nav li:hover > ul {
		display: block;
	}
	
	/* level 2 list */
	#nav ul {
		display: none;
		margin: 0;
		padding: 0;
		width: 200px;
		position: absolute;
		top: 26px;
		left: 0;
		background: #ffffff;
	}
	
		#nav ul li {
		float: none;
		margin: 0;
		padding: 0;
	}

	#nav ul a {
		font-weight: normal;
		text-shadow: 0 1px 0 #fff;
	}

	/* level 3+ list */
	#nav ul ul {
		left: 200px;
		top: 0px;
	}

	/* clearfix */
	#nav:after {
		content: ".";
		display: block;
		clear: both;
		visibility: hidden;
		line-height: 0;
		height: 0;
	}
	#nav {
		display: block;
	}
	
	
	#facebook ul {
		display: none;
		margin: 0;
		padding: 0;
		width: 537px;
		position: absolute;
		top: 26px;
		left: 0;
		background: #ffffff;
	}

Open in new window

<?php
require_once('header.php');
$body_text_title = "What is the Showdown?";
?>

<body>
<table width=100% cellspacing="0" cellpadding="0">
<tr>
<td class="background">
	<table width="1000" cellspacing="0" cellpadding="0" border="0" align="center">
	<tr>
	<td colspan="2"><?php require_once('login_form.php'); ?></td>
	</tr>
	<tr>
	<td colspan="2" background="images/header_background.jpg"  height="198"><IMG SRC="images/header_image.jpg" height="198">
	</td>
	</tr>
	<tr>
	<td>&nbsp;<BR>
	</td>
	<td align="center">
	<ul id="nav">
		<li><a href="index.php">What is the Showdown</a>
		<ul>
			<li><a href="ContestLocations.php">Contest Locations</a></li>
			<li><a href="ContestList.php">View Contestants</a>
				<ul>
					<li><a href="ContestantList.php">Current Contestants</a></li>
					<li><a href="ContestantList_alumni.php">Alumni</a></li>
					<li><a href="hall_of_fame.php">Hall of Fame</a></li>
					<li><a href="WinnersCircle.php">Winners' Circle</a></li>
				</ul>
			</li>
		</ul>
		</li>
		<li><a href="#">Contestants</a>
		<ul id="facebook">
			<li><a href="ContestLocations.php">Contest Locations</a>
				<ul>
					<li><a href="ContestantList.php">Current Contestants</a></li>
					<li><a href="ContestantList_alumni.php">Alumni</a></li>
					<li><a href="hall_of_fame.php">Hall of Fame</a></li>
					<li><a href="WinnersCircle.php">Winners' Circle</a></li>
				</ul>
			</li>
		</ul>
		</li>
	</ul>
	</td>
	</tr>
	<tr>
	<td><IMG SRC="images/spacer.gif" width="54" height="10"></td>
	<td align="center" valign="top"><?php require_once('carousel.php'); ?>
	</td>
	</tr>
	<tr>
	<td>&nbsp;<BR></td>
	<td>
		<table cellspacing="0"  width="950" cellpadding="0" bgcolor="white">
		<tr>
		<td class="tray"><!--here's all your content -->
			<table width="945">
			<tr>
			<td class="marquee_holder"><BR><BR>
			<?php require_once('marquee.php'); ?>
			</td>
			</tr>
			<tr>
			<td>
			<?php require_once('title_body.php'); ?>
			</td>
			</tr>
			</table>
		</td>
		</tr>
		</table>
	</td>
	</tr>
</table>
</body>
</html>

Open in new window

0
brucegust
Asked:
brucegust
  • 2
1 Solution
 
LZ1Commented:
Try this for your HTML from the <ul id="nav">
<ul id="nav">
		<li><a href="index.php">What is the Showdown</a>
		<ul>
			<li><a href="ContestLocations.php">Contest Locations</a></li>
			<li><a href="ContestList.php">View Contestants</a>
				<ul>
					<li><a href="ContestantList.php">Current Contestants</a></li>
					<li><a href="ContestantList_alumni.php">Alumni</a></li>
					<li><a href="hall_of_fame.php">Hall of Fame</a></li>
					<li><a href="WinnersCircle.php">Winners' Circle</a></li>
				</ul>
			</li>
		</ul>
		</li>
		<li><a href="#">Contestants</a>
		<ul id="facebook">
			<li><a href="ContestLocations.php">Contest Locations</a>
			<li><a href="ContestantList.php">Current Contestants</a></li>
			<li><a href="ContestantList_alumni.php">Alumni</a></li>
			<li><a href="hall_of_fame.php">Hall of Fame</a></li>
			<li><a href="WinnersCircle.php">Winners' Circle</a></li>
		</ul>
		</li>
	</ul>

Open in new window

0
 
brucegustAuthor Commented:
Didn't work. Check out the site with your suggestions as I implemented them. Let me know if I missed something.
0
 
brucegustAuthor Commented:
I got it! Thanks for your time!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now