Hi.
I was just making some random webpages, and I have bumped into this problem which is:
I have the MENU selection like : Blah ; Blah ; Blah; More blah; - and if I hover on "More blah", then more options are visible.
Everything works fine, my only problem is, when I hover on the options under "More blah", the effects of the hover on "More Blah" just go away. I have this code ATM.:
For CSS:
[code]
div#menu ul li a:hover {
background: url('bg_menu_hover.gif');
}
div#menu ul li:hover div{
display: block;
}
div#menu ul li:hover div a {
text-decoration: none;
color: #000;
display: inline-block;
}
div#menu ul li div a:hover{
background: #575252;
text-decoration: underline;
color: #fff;
}[/code]
For HTML:
[code]
<div id="menu">
<ul>
<li><a href="index.html">Main Page</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li style="border-right: 0;"><a>More stuff</a>
<div>
<a>Creations</a>
<a>Videos</a>
<a>Livestream</a>
<a>Other</a>
</div>
</li>
</ul>
</div>
[/code]
---
I have tried
[code]div#menu ul li div a:hover #menu ul li a{
background: url('bg_menu_hover.gif');
}[/code], but it doesn't seems to work.
Thanks for the help, and sorry if it's a little bit confusing. I can add more details if needed.
Peace
Completely unrelated, why do you write div in your css?
Use [noparse][code][/code][/noparse] tags please.
Blah Blah Blah ...what?
or php tags for some code hinting.
-snip-
[QUOTE=Killervalon;37958713]Completely unrelated, why do you write div in your css?[/QUOTE]
I already did this "version", and it was working. It just doesn't work with this one, and that's why I'm asking it. It does not have any affect on it.
*Also added the tags, sorry for them.
I think I fixed what you are referring to. It uses a hover pseudo selector on a list item though, which I believe isn't supported on older versions of IE. If there's a better way of doing it, someone pitch in.
All I did was add an additional selector to the first style rule you have, because as soon as your mouse is off the first-level A, the hover effect goes away. However, you are still technically hovering over that list item the entire time.
Also, you should make a UL instead of the div like the above user said. It's correct mark up and also conveys the order/nesting of links when/if the page is viewed without CSS.
The only other thing I did was remove the "div" from in front of each #menu selector, as correct mark up means only having one of each element with the same ID anyway so it's not needed.
Here's my complete test file, but all you really need to add is the addition to the first CSS rule.
[code]<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#menu ul li a:hover, #menu ul li:hover a {
background: url('bg_menu_hover.gif');
}
#menu ul li:hover ul {
display: block;
}
#menu ul li:last-child {
border-right: 0;
}
#menu ul li:hover ul li a {
text-decoration: none;
color: #000;
display: inline-block;
}
#menu ul li ul li a:hover{
background: #575252;
text-decoration: underline;
color: #FFF;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="index.html">Main Page</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a>More stuff</a>
<ul>
<li><a>Creations</a></li>
<li><a>Videos</a></li>
<li><a>Livestream</a></li>
<li><a>Other</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>[/code]
Sorry, you need to Log In to post a reply to this thread.
