CSS - Horizontal Menu - Can't hover past first item in menu list
CSS - Horizontal Menu - Can't hover past first item in menu list
(OP)
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: www.mukwonagofire.org
These do not: www.mukwonagofire.org\Employment.html and www.mukwonagofire.org\ContactInformation.html
Here is the css involved (from a common CSS file):
Here is the menu html code (in separate .html files):
THANKS FOR THE HELP!!!
This webpage works: www.mukwonagofire.org
These do not: www.mukwonagofire.org\Employment.html and www.mukwonagofire.org\ContactInformation.html
Here is the css involved (from a common CSS file):
CODE --> 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):
CODE --> 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="http://www.mukwonagofire.org"><u>Home</u></a></li>
<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 & 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)
Talk To Other Members
RE: CSS - Horizontal Menu - Can't hover past first item in menu list
www.mukwonagofire.org/Employment.html and www.mukwonagofire.org/ContactInformation.hmtl
FireGeek
(currently using Crystal Reports XI with Lawson 9.01)
RE: CSS - Horizontal Menu - Can't hover past first item in menu list
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
RE: CSS - Horizontal Menu - Can't hover past first item in menu list
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
on your Employment.html page and the z-index: 13; from the div below
CODE
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
RE: CSS - Horizontal Menu - Can't hover past first item in menu list
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)
RE: CSS - Horizontal Menu - Can't hover past first item in menu list
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
RE: CSS - Horizontal Menu - Can't hover past first item in menu list
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 ?
RE: CSS - Horizontal Menu - Can't hover past first item in menu list
Don't join coding forums then, they prefer that you 'spoon-feed' completed code as responses.
Chris.
Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
RE: CSS - Horizontal Menu - Can't hover past first item in menu list
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)
RE: CSS - Horizontal Menu - Can't hover past first item in menu list
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!
"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