CSS Works - But Not Understanding How????

[Mfho1]

Hi,

I'm reviewing some code. I didn't write it.

Here's the HTML portion.

<div id="navbar">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">Home</a> </li>
<li><a href="about.html" class="MenuBarItemSubmenu">About</a>
<ul>
<li><a href="oil.html">Our Oil</a> </li>
<li><a href="#">The Land</a></li>
<li><a href="company.html">Company</a></li>
</ul>
</li>
<li><a href="process.html">Process</a> </li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>


Now here's the definition of the CSS that controls this horizontal menu bar:

/* CSS Part 1 */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #33421F;
color: #FFF;
}

/* CSS Part 2 */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #32411f;
color: #FFF;
}

Now here's where I'm TOTALLY confused. Maybe I'm not understanding the CSS.

When I change colors in the CSS Part 1, nothing happens. I could change the background-color to pink and the text color to yellow and nothing happens. I've saved the CSS and looked at it in the file.

Now, here's the really ironic part. If I do the same for the CSS Part 2, everything changes.

And I don't know how, because if you look in the HTML code, none of the <a> tags have "a.MenuBarItemHover", or "a.MenuBarItemSubmenuHover", or "a.MenuBarSubmenuVisible". I'm not getting it. Why would this work?

When I see ul.MenuBarHorizontal a.MenuBarItemHover, I take this to read: "Modify All anchor tags with a class of MenuBarItemHover that's contained inside an unordered list that has a class of MenuBarHorizontal."

So I guess my biggest issue is why doesn't CSS Part 1 work, and why is CSS Part 2 working when there's really nothing in my HTML code referencing it?

I've tried to contact the person who wrote this code, but thought I'd get someone else's take on it.

Thanks in advance.

mfho1


Thanks in advance for your help.
mfho1

 

[vacunita]

If I were a gambling man, I'd put money on there being some extra Javascript or even JQuery code involved. Specifically to change the classes for the items so the CSS gets applied.

Other than that, as it stands the only thing that actually affects the html would be the first part of the CSS you posted, and it only affects it when the list items are being hovered over, or focused.

Without seeing the rest of the page its hard to be any more specific.




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

 

[ChrisHirst]

So "part2" is being loaded last in the cascade then.

Chris.

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

 

[Mfho1]

Thanks for the posts.

Yes, I'm still researching how this can happen, but I'll take a look at the JS.

Thanks again.

Thanks in advance for your help.
mfho1

 

[c0deM0nK424]

naraish-kumar.info


go to 'my work' and go to 'css'

i think ive got snippets of code similar to yours - for an ul , where ive removed the bullet points or something and introduced a hover thing.


if u need more info - the contact details are on there, but im out of work and trying to land a job as a programmer of some sort and busy checking emails from web recruitment agencies and prospective mployers.

man i hate the question " so how much COMMERCIAL experience do you have ? "

 

[RGShack]

You seem to be missing css rules for these two also:

<div id="navbar">
<ul id="MenuBar1