CSS Pseudo Class Inheritance
I'm trying to understand why my CSS functions in Opera, but does not in Firefox. The effect I'm after is simply a button that, when hovered over, displays a drop down.
<html>
<head>
<style>
.dropcontrol {
background-color: red;
}
.dropdown {
display: none;
}
.dropcontrol:hover .dropdown {
display: block;
}
</style>
</head>
<body>
<div cla开发者_如何学Pythonss='dropcontrol'>TEST
<div class='dropdown'>
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
</div>
</body>
</html>
The problem appears to be the .dropcontrol:hover .dropdown. Any ideas as to why this would work in Opera, but not Firefox?
Thank you for your time.
I'm not sure why your particular setup doesn't work, but there are better ways to go about doing it.
For starters, it's generally a better idea to do what you're doing with all lists. So you'd have something like:
<ul class="dropcontrol">
<li>Test
<ul class="dropdown">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</li>
</ul>
If you have to keep dropcontrol as a div, then you can clean up what you have by removing the dropdown div and giving the ul tag the dropdown class.
Also, depending on what, exactly, you're trying to do, the <select> element may also be a better choice.
Here is one solution for firefox. I have never used Opera and I have never seen a dropdown attempted the way you have posted it. This is how I usually do it.
.dropcontrol {
background-color: red;
}
.dropcontrol li ul {
visibility:hidden;
}
.dropcontrol li:hover ul {
visibility:visible;
}
<div class='dropcontrol'><ul><li>TEST
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</li></ul>
</div>
Okay, I'm not entirely sure why this changes the way Firefox works, but the answer was to include the doctype tag as xhtml-transitional.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd">
I think it has to do with this code:
.dropcontrol:hover .dropdown {
display: block;
}
What happens if you add .dropdown:hover? Does that help? You may also be getting some other issues with css, try adding !important, that could help as well.
On another note, if your having troubles with only firefox or only Opera, you can do something like this to code css for each specific browser (may be helpful once you better know the issue)
FireFox
@-moz-document url-prefix() {
#someID {
position: relative;
top: -1px;
}
}
Opera
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
#my-id { clear:right; }
}
加载中,请稍侯......
精彩评论