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