CSS - Horizontal Menu - Can't hover past first item in menu list 3

FireGeek21 · May 28, 2014

I am updating the menus on my website so they display as menu categories with list items that drop down and are viewable when you hover over the menu item. One of my webpages works but 2 others do not. Before I continue with my updates, I would like to identify the issue. Unfortunately, I cannot figure it out at this point.

This webpage works:

http://www.mukwonagofire.org

These do not:

http://www.mukwonagofire.org\Employment.html

and

http://www.mukwonagofire.org\ContactInformation.html

Here is the css involved (from a common CSS file):

CSS:

#navbar 
	{
		margin: 0;
		padding: 0;
	}
#navbar li
	{
		list-style: none;
		float: left;
		font-family: Arial, Helvetica, adobe-helvetica, Arial Narrow;
		color: #FFCC00;
		font-size: 13px;
		line-height: 16px;
		min-height: 16px;
	}
#navbar li a
	{
		display: block;
		padding: 10px 15px 4px;
		font-size: 13px;
		background-color: #000000;
		font-family: Arial, Helvetica, adobe-helvetica, Arial Narrow;
		color: #FFCC00;
		font-size: 13px;
		line-height: 16px;
		min-height: 16px;
		text-decoration: none;
	}
#navbar li ul
	{
		display: none; 
		font-size: 13px;
		width: 10em; /* Width to help Opera out */
		font-family: Arial, Helvetica, adobe-helvetica, Arial Narrow;
		color: #FFCC00;
		font-size: 13px;
		line-height: 16px;
		min-height: 16px;
	}
#navbar li:hover ul
	{
		display: block;
		position: absolute;
		margin: 0;
		padding: 0;
		font-family: Arial, Helvetica, adobe-helvetica, Arial Narrow;
		color: #FFCC00;
		font-size: 13px;
		line-height: 16px;
		min-height: 16px;
	}
#navbar li:hover li
	{
		float: none;
		color: #FFCC00;
	}
#navbar li:hover li a
	{
		background-color: #000000;
		border-bottom: 1px solid #FFCC00;
		border-left: 1px solid #FFCC00;
		border-right: 1px solid #FFCC00;
		color: #FFCC00;
		font-family: Arial, Helvetica, adobe-helvetica, Arial Narrow;
		font-size: 13px;
		line-height: 16px;
		min-height: 16px;
	}
#navbar li li a:hover
	{
		background-color: #FFCC00;
		color: #000000;
	}

Here is the menu html code (in separate .html files):

HTML:

		<div class="lpxcenterpageouter">
			<div class="lpxcenterpageinner">
				<!-- Short MFD Banner -->
				<div style="position: absolute; top: 7px; left: 15px; width: 820px; height: 150px; z-index: 5;">
					<img height="150" width="820" alt="" src="/includes/images/Header2013_b.png">
				</div>
				<!-- Light Gray Background> -->
				<div style="position: absolute; top: 0px; left: 0px; width: 850px; height: 1600px; z-index: -100;">
					<div style="height: 1600px; padding: 0; border-width: 0; border-color: #000000; border-style: solid; background-color: #BDBDBD;"></div>
				</div>

				<div class="linkpos">
					<ul id="navbar">
						<li><a href="[URL unfurl="true"]http://www.mukwonagofire.org"><u>Home</u></a></li>[/URL]
						<li><a href=""><u>Resources</u></a>
							<ul>
								<li><a href="/BurnPermits.html">Burning Permits</a></li>
								<li><a href="/LearnCPR.html">Learn CPR</a></li>
								<li><a href="/FD_LINKS/links.html">Links</a></li>
							</ul>
						</li>	
						<li><a href="/POLICIES/sogs.html"><u>Policies &amp; SOGs</u></a>
						
							<ul>
								<li><a href="/CommissionReview.html">Commission</a></li>
							</ul>
						</li>
						<li><a href=""><u>About Us</u></a>
							<ul>
								<li><a href="/Employment.html">Employment</a></li>
								<li><a href="/mission.html">Mission</a></li>
								<li><a href="/ContactInformation.html">Contact Us</a></li>
							</ul>
						</li>
						<li><a href="/MFDSECURE/_mfdsecure.html"><u>MFD LOGIN</u></a></li>
					</ul>
				</div>
                         </div>
                  </div>

THANKS FOR THE HELP!!!

FireGeek
(currently using Crystal Reports XI with Lawson 9.01)

FireGeek21 · May 28, 2014

The websites should be:

http://www.mukwonagofire.org/Employment.html

and

http://www.mukwonagofire.org/ContactInformation.hmtl

FireGeek
(currently using Crystal Reports XI with Lawson 9.01)

ChrisHirst · May 29, 2014

You might want to give some serious thought to reducing that image size.

Does it need to be ~1.2MiB????? Really ?????

AND

Your :hover pseudo class rules do not extend past the first nested list element

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

datamasher · May 29, 2014

Hi FireGeek,

The problem appears to be a z-index problem in the html on your pages.

If you remove the z-index: 13; from the div below

Code:

<div id="element21" style="position: absolute; top: 175px; left: 26px; width: 800px; height: 108px; z-index: 13;">
<h3>Employment Opportunities</h3>

on your Employment.html page and the z-index: 13; from the div below

Code:

<!-- Contact Information!> -->
<div style="position: absolute; top: 175px; left: 26px; width: 800px; height: 108px; z-index: 13;">

on your

ContactInformation.html page the menu will work ok

Reason : A z-index of 13 here will place the div content above the dropdown menu content and you can't then click through it
on to the menu.

Hope this helps

Steve (datamasher) from UK

FireGeek21 · May 29, 2014

Thank you ChrisHirst and datamasher for your response.

Chris, please don't poke at the image file size. I inherited this website and have made some serious changes since I got it. As it is right now, it is hands down faster and better written and the code is way more organized than what I got it. Also, I am trying to rewrite everything using HTML5 and CSS - not easy since it all was originally put together using HTML3 and some HTML4! Priorities first! I do have some people looking at a new image to use.

Now, on to my original question. Thank you both for your suggestions. datamasher, I tried the z-index in attempt to put the menu on top of the page behind it - obviously no success. I will do both your suggestions and keep my fingers crossed.

Thanks again~

FireGeek
(currently using Crystal Reports XI with Lawson 9.01)

vacunita · May 29, 2014

Most of the issues stems from the uncontrolled use of absolute positioning. You'll have many more issues if you keep positioning everything. Because then you are forced to add additional styling that should not be necessary. And just makes tracking down issues like this a pain. Personally I try to stay away form positioning unless absolutely necessary. Your dropdown menus proabably do require it but the rest of the standard elements that should follow a standard flow really do not.

Based on what I've seen of the source code, there's really no reason to use absolute positioning on most of the elements that have it.

If you remove the positioning form your header and other divs that don't really need it the menu should work.

And yes, optimizing that image should be a priority.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

c0deM0nK424 · Jun 17, 2014

nice coding - nice brouchure style website - nice menu. impressed. - good work, im here to encourage and to help those who TRY - to get better and better - and to draw inspiration from those i deem to be around my level of css and html designing ability

not saying im equal to you - but you are better indeed.

look at mine ! look at mine ! ^_^

lmao

http://www.bsplumbandelectric.co.uk

and something thats never really GONE PAST 15% completion....

http://www.bsconstructionandplumbing.co.uk

i take it this thread is closed now ? his issue has been resolved ?

ChrisHirst · Jun 18, 2014

im here to encourage and to help those who TRY

Don't join coding forums then, they prefer that you 'spoon-feed' completed code as responses. [dazed]

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

FireGeek21 · Jun 18, 2014

Thanks you c0deM0nk424 for your comments. My apologies for not posting the actual solution! The z-index was not the issue rather it was vacunita's post regarding uncontrolled absolute positioning. I applied the suggestions in vacunita's post and I now have a working set of drop down menus! I have since done some reading up on position: absolute/relative and when it is appropriate to use each. As I mentioned before, this was an inherited website and this is some of the code left in from the older version - which, by the way, was put together using propriatary software from the webhosting site previously used! It was a MESS!!!

I have only been working with HTML/CSS for a year and a half. I am all self taught! I don't learn from people like ChrisHirst rather from people who provide a bit of an explanation along with the code. ChrisHirst, you were of no help whatsoever.

Thank you everyone!!!

FireGeek
(currently using Crystal Reports XI with Lawson 9.01)

1DMF · Jun 19, 2014

FireGeek,

Like you, many of us are self taught, I for one am not only self taught but also suffer from dyspraxia a learning disability. I know how much of a struggle it can be tying things together and truly understanding not just the problem, but sometimes the solution provided by the awesome advice this forum facilitates.

I have been a member of TT for nearly 10 years, and cannot thank the people enough who have helped me over the years, including ChrisHirst who has been actively supporting the TT community for longer than I have been a member.

His advice on the image size was sound, though a tangent to your specific problem, which is why I gave him the star yesterday, as I feel many hardcore contributors of this site go unrewarded for their continued efforts (you'll notice I gave Phil a start also!).

I wasn't going to post on this thread, but following your last comment, I just wanted to reassure you, that all replies to your posts, especially from the usual suspects in not only this forum, are always advice, not criticism, and never meant to belittle you, or make things difficult for you to understand, even if you feel it comes across that way at times, some reply's can be positively cryptic, remember they understand it and sometimes forget you don't!

It's cool to come back and admit if you didn't understand a reply to your thread, or simply need further expansion.

Hey, I've had plenty of heated discussions with strongm, but he knows how much I respect him and all the help he has provided me and continues to provide.

Don't count out contributors to this community based on first impressions, you could be shooting yourself in the foot!

I shudder to think about the poor quality of my mark-up and CSS before I met the nice folks here on TT and in this forum, I still make mistakes and I still have to come back and ask questions from time to time, but my mark-up is now something I am proud of and confident is moving in the right direction.

Persevere in this forum and with all who contribute and I am sure you will be saying the same thing before you know it!

[2thumbsup]

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS - Horizontal Menu - Can't hover past first item in menu list 3

FireGeek21

Technical User

FireGeek21

Technical User

ChrisHirst

IS-IT--Management

datamasher

Technical User

FireGeek21

Technical User

vacunita

Programmer

c0deM0nK424

Programmer

ChrisHirst

IS-IT--Management

FireGeek21

Technical User

1DMF

Programmer

Similar threads

Part and Inventory Search

Sponsor