[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

I need help with this menu

Posted on 2011-10-18
19
Medium Priority
?
244 Views
Last Modified: 2012-05-12
Attached is a screen shot of the menu that I've put together using the code that is also attached.

Here's my dilemma:

The link needs to be aligned to the left versus the center. How do I do that?
The pulldown, while it displays fine when you hover over the text, disappears the moment you leave the area of the text. In other words, you can't manipulate the links because as soon as you move the mouse, the menu disappears.

How do I correct the above listed problems?

Thanks! screenshot of menu dilemma
stylesheet:

<style type="text/css">

#menuContain {width:949px; height:25px; position:relative; float:left; background-color:#000000;}

#menuContain ul{
float:left;
margin:0;
padding:5px;
list-style-type:none;
list-style:none; 
display:inline;
}

#menuContain li {display:inline; padding:0px;}

/*---actual menu items-----*/
#menuOne {display:none;
position:absolute;
top:25px;
left:0px;
width:200px;
height:200px;
background:#ffffff;
filter:alpha(opacity=65);
padding:0px;
}
#menuContain li.one:hover #menuOne {display:block;}

#menuTwo {display:none;
position:absolute;
top:25px;
left:110px;
width:200px;
height:200px;
background:#ffffff;
padding:0px;
}
#menuContain li.two:hover #menuTwo {
font-family: Verdana, Microsoft Sans Serif;
font-size: 10px;
color: #ffffff;
display:block;}
</style>

HTML

<div id="menuContain">
		<ul>
		<li class="one"><font color="white">What is the Showdown</font><div id="menuOne"><BR><A HREF="http://www.countryshowdown.com">content for one here</a></div></li>
		<li class="two"><font color="white">item two</font><div id="menuTwo">content for two here</div></li>
		</ul>
		<div style="clear:both;"></div>

Open in new window

0
Comment
Question by:brucegust
  • 7
  • 7
  • 5
19 Comments
 
LVL 16

Expert Comment

by:rbudj
ID: 36989179
have you tried adding this to menuOne?:

text-align:left;
0
 

Author Comment

by:brucegust
ID: 36989276
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?
0
 
LVL 16

Expert Comment

by:rbudj
ID: 36989462
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.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 16

Expert Comment

by:rbudj
ID: 36989502
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.
0
 
LVL 8

Expert Comment

by:Jesse Matlock
ID: 36989690
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.
0
 

Author Comment

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

Standing by for brilliant commentary and assistance...

0
 
LVL 8

Expert Comment

by:Jesse Matlock
ID: 36989898
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>

Open 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;
	}

Open 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..
0
 
LVL 16

Expert Comment

by:rbudj
ID: 36989969
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.
0
 
LVL 16

Expert Comment

by:rbudj
ID: 36989982
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.
0
 

Author Comment

by:brucegust
ID: 36990051
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!
0
 
LVL 8

Expert Comment

by:Jesse Matlock
ID: 36990370
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;
	}

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

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

Open in new window


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

Author Comment

by:brucegust
ID: 36992345
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?
0
 
LVL 8

Expert Comment

by:Jesse Matlock
ID: 36995363
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>

Open in new window


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

Author Comment

by:brucegust
ID: 37000082
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?
0
 
LVL 8

Expert Comment

by:Jesse Matlock
ID: 37002020
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;
	}

Open in new window

0
 

Author Comment

by:brucegust
ID: 37004055
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?
0
 
LVL 8

Accepted Solution

by:
Jesse Matlock earned 2000 total points
ID: 37004106
yes, that's exactly what I did.. I made it that height because it also has padding, which adds to the height... lastly, to get the submenus to line up with the nav properly,. replace the code in your CSS with the code below (lines 142 to 169):

	/* level 2 list */
	#nav ul {
		display: none;
		margin: 0;
		padding: 0;
		width: 185px;
		position: absolute;
		top: 26px;
		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: -0px;
	}

Open in new window

0
 

Author Comment

by:brucegust
ID: 37004126
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 http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27408035.html

Weight in if you could!
0
 
LVL 8

Expert Comment

by:Jesse Matlock
ID: 37004133
excellent.. thank you!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses
Course of the Month19 days, 20 hours left to enroll

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question