I need help with this menu

have you tried adding this to menuOne?:

text-align:left;

That took care of the alignment - excellent! What am I doing wrong as far as why the menu doesn't linger? You mouse over it, the menu appears but then goes away as soon as you try to click on the link in the menu. What's the setting there that needs to be changed?

Thats a good question. You should probably post a new question since it is a seperate issue than this question. It will also be helpful to have your website posted on the Internet so the experts can do some testing to provide an accurate solution.

oh sorry, re-reading your post this is a two part question. Still though, it will be difficult to troubleshoot if your site is not live on the Internet.

By just taking a preliminary look at your code, here are the things that stand out to me:

1) It may have been omitted on accident, but I do not see the closing </div> for the <div id="menuContain">

2) <font> is no longer a valid tag. It was deprecated in HTML4 and removed from HTML5 :) You'll want to use <span></span> to wrap your text, and style accordingly - either within the style attribute (not preferred) or by using a class and CSS (preferred)

3) You have a line break (<br/>) in the first menu item, but not the second.

4) The divs within your <li>'s (#menuOne and #menuTwo) are positioned absolute, but the <li>'s are no positioned relative.

Those are just some of the things that I would address to make sure they weren't playing a part in this issue.. if you have a link to the live site, I'd be happy to take a look and help you out.. and I'm sure rbudj is as well.

OK, guys! I have posted the site as it stands right now on http://countryshowdown.com/Chevron/

Standing by for brilliant commentary and assistance...

Quite honestly, to make this as easy on your as possible, I would start off with a clean slate.. and build the menu out like this:

HTML:

	<ul id="nav">
		<li class="current"><a href="http://www.example.com">Home</a></li>
		<li><a href="#">Main 0</a>
			<ul>
				<li><a href="#">First Level</a>
					<ul>

						<li><a href="#">Sub-Level Item</a></li>
						<li><a href="#">Sub-Level Item</a>
							<ul>
								<li><a href="#">Sub-Level Item</a></li>
								<li><a href="#">Sub-Level Item</a></li>
								<li><a href="#">Sub-Level Item</a></li>
							</ul>
						</li>
						<li><a href="#">Sub-Level Item</a></li>
					</ul>
				</li>
				<li><a href="#">Example</a></li>
				<li><a href="#">Example</a></li>
				<li><a href="#">Example</a>
					<ul>
						<li><a href="#">Sub-Level Item</a></li>
						<li><a href="#">Sub-Level Item</a></li>
						<li><a href="#">Sub-Level Item</a></li>
					</ul>
				</li>

			</ul>
		</li>	
		<li><a href="#">Main 2</a></li>
		<li><a href="#">Main 3</a></li>
	</ul>

Select allOpen in new window

CSS:

	#nav {
		margin: 0;
		padding: 7px 6px 0;
		background: #7d7d7d;
		line-height: 100%;
	}
	#nav li {
		margin: 0 5px;
		padding: 0 0 8px;
		float: left;
		position: relative;
		list-style: none;
	}


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

	/* main level link hover */
	#nav .current a, #nav li:hover > a {
		background: #666;
		color: #444;
		border-top: solid 1px #f8f8f8;
	}

	/* 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: #333;
		color: #fff !important;
	}

	/* dropdown */
	#nav li:hover > ul {
		display: block;
	}

	/* level 2 list */
	#nav ul {
		display: none;

		margin: 0;
		padding: 0;
		width: 185px;
		position: absolute;
		top: 35px;
		left: 0;
		background: #ddd;

	}
	#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: 181px;
		top: -3px;
	}

	/* clearfix */
	#nav:after {
		content: ".";
		display: block;
		clear: both;
		visibility: hidden;
		line-height: 0;
		height: 0;
	}
	#nav {
		display: inline-block;
	}

Select allOpen in new window

That will give you a working menu, from there you can customize it, change colors, bg images, spacing, etc.. but this will ensure we're not dealing with conflicts to the other menus CSS from your site.. and give us a starting place to isolate any issues that may arise.. I'd encourage you to drop this in your site and see how it works. I'd be happy to help you with the styling, so it will match the site, etc..

Ok. Thank you for posting the site.

First before we dive in, you need to fix the CSS and HTML errors. Some errors of course cannot be controled such as the twitter code but you should fix everything you possibly can. Head tag, etc...

HTML errors (46): http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcountryshowdown.com%2FChevron%2F

CSS errors (1): http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fcountryshowdown.com%2FChevron%2F

Almost 8 times of 10 when the errors are fixed the problem is fixed. Fix what you can and report back.

btw... If you view your page if Firefox, you will notice that the problem only exists on every other attempt... meaning I move my mouse over the "What is the Showdown" link, I move the mouse down and the drop down disappears. But on the second attempt it allows me to click the link. This is most probably a standards issue that could correct itself with fixing the HTML and CSS errors.

cloud9manager: I think we're poised on the threshold of great things. I've got your code implemented. I need to bring the height of the black portion of the menu to about 25 px; When I did that, it was then that the links ceased to work properly in that you couldn't mouse over them. I put it back to 35px, but I need it to be 25. How do I do that?

Also, everything is justified to the left now and I don't know why.

Thanks for your help!

Hey brucegust,
Great to see the progress on the site! I took a look and tried this code:

	#nav {
		margin: 0;
		padding: 0px 6px 0;
		background: #000000;
		width: 937px;
		height:25px;
	}
	#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:  5px 20px;
		margin: 0;
		height: 15px;
	}
	#nav a:hover {
		background: #000;
		color: #fff;
	}

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

Select allOpen in new window

Notice, this only replaces lines 77 thru 114, not the full menu code!.. but this reduced the height of the menu and allowed me to use the links, sub links, etc.. :)

Let me know if that works for you!

Regarding the left alignment issue.. looks like a separate issue,. but here is what I see from the source code:

one the Chevron page (where it's NOT aligned properly):

<body align="center">
<table width=100% cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="background">
	<table width="1000" cellspacing="0" cellpadding="0" border="0">
	<tr>
	<td><table width=100% cellspacing="0" cellpadding="0" border="0">
<tr>
<td><IMG SRC="images/spacer.gif" width="55" height="10">
</td>
<td background="images/spacer.gif" width="550" height="10" align="left">

Select allOpen in new window

and on the Texaco page (where it is aligned properly):

<body>
<table width=100% cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="background">
	<table width="1000" cellspacing="0" cellpadding="0" border="0">
	<tr>
	<td><IMG SRC="images/spacer.gif" width="50" height="32">
	</td>
	<td><table width=100% cellspacing="0" cellpadding="0" border="0">
<tr>
<td background="images/spacer.gif" width="550" height="10" align="left">

Select allOpen in new window

Looks like you've added an extra table in there.. possibly breaking the code..

cloud9!

We are poised on the threshold of great things. However, I'm still missing something. I've uploaded your corrections and while the nav bar is now the correct height, I'm having troubles with the menu not remaining visible once you mouse over the buttons. What's the setting that needs to be changed in order for the menu to remain in place so a user can access the pulldown as well as the secondary menus?

Hmm... I would suggest running the site through the W3C validator, and checking into any errors (warnings may not be as pertinent). Many of the 'errors' are incorrect (eg. saying the <body> tag is not allowed on line 6 LOL)..

http://validator.w3.org/check?uri=http%3A%2F%2Fcountryshowdown.com%2FChevron%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Also, many of these look to be related to the DOCTYPE.. so, looking into that would be helpful. You may even went to temporarily replace it with (HTML5 doctype):

<!DOCTYPE html>
<html lang="en">
<head>

Select allOpen in new window

to see if that eliminates that conflict.
Lastly, what OS and browser are you using ?

Hey cloud9!

I figured it out. While I changed the doctype like you recommended, that didn't solve the problem as far as the pulldowns disappearing. What did make the difference, however, was changing the height of the #nav a dynamic to 29px.

I did a little research and while I'm still a pig on rollerskates with all this, it seems that unless I changed the height of that area, once the mouse went beyond 25 px, it was no longer being processed as a "mouseover" so anything associated with that mouse movememnt was eliminated, hence the menu disappearing.

While the menus function, I need to get the pulldowns positioned in a way there they're right up against the black nav bar. How do I do that?

Try this code,.. this will replace from line 81 to the end of your CSS ok.

#nav {
		margin: 0;
		padding: 0px 6px 0;
		background: #000000;
		width: 937px;
		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: #666;
		color: #444;
	}

	/* 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: #333;
		color: #fff !important;
	}

	/* dropdown */
	#nav li:hover > ul {
		display: block;
	}

	/* level 2 list */
	#nav ul {
		display: none;
		margin: 0;
		padding: 0;
		width: 185px;
		position: absolute;
		top: 25px;
		left: 0;
		background: #ddd;

	}
	#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: 181px;
		top: -3px;
	}

	/* clearfix */
	#nav:after {
		content: ".";
		display: block;
		clear: both;
		visibility: hidden;
		line-height: 0;
		height: 0;
	}
	#nav {
		display: block;
	}

Select allOpen in new window

cloud9!

Man, we're close!

I was looking at the correction you made and just so I'm learning and not just copying and pasting, the reason your solution works is because you changed the height of main level link to 20, correct?

I uploaded your stuff and there's only one other thing and that's the placement of the submenu. It doesn't lie nice and even with the nav bar. The "sub level" needs to be flush with the top of the pulldown. How do I do that?

I figured it out not long after I submitted my last post. Thanks so much and I've got another question that I just posted at https://www.experts-exchange.com/questions/27408035/How-are-they-pulling-off-this-opacity-effect.html

Weight in if you could!

excellent.. thank you!