I have a navigation bar with some nodes that have a drop down menu to show more options, everything works wonderfully in IE/Firefox but in Chrome on :hover the links go transparent instead of having a nice background color like in IE and Firefox.
Here is a JSFiddle, if you run it in Chrome and hover over the Admin option you will see the drop down and extended options, when hovering over those they should display similar to the top level items but they do not.
http://jsfiddle.net/6jX5J/
Anyone see any problems in the HTML or CSS?
Thanks!
Try changing you CSS selector from descendant to a child selector in:
#nav li:hover
Change to
#nav>li:hover
Related
I've been at this for over an hour. Chrome on Android seems to put a bluish color over active links or the parent of the active links. See the screenshot for what I am talking about. That is a nav with a ul, and an li and a tag for the "HOME" link there. I'm trying to make it look like the one below it all of the time. I've tried everything, a:active, li:active overriding the background color, but it always has that blue.
Anybody know which style it is in the user agent stylesheet that does that so I can override it? Or is it not possible to override?
OK figured it out. It was -webkit-tap-highlight-color, very much hidden in the dev tools.
Im look as much as possible to avoid having to use a JS solution for this. But if that is my only option to get this working then ill bite the bullet.
I have a slide out nav section that has a toggle button in it.. this nav section covers a topbar that has a corresponding toggle button in it..
they both have hover animations using CSS3 animations applied to the :hover attribute. My issue occurs because both toggle buttons align with one another.. so when the nav is opened and closed you do not need to move your cursor.. because of this the :hover event doesnt appear to be getting triggered on the new element that is under the cursor until you move your mouse..
However, on Firefox they do appear to get triggered
I have had a look at people having issues with this to do with jQuery hover events not firing: here
If anyone knows of a css or html way to do this i would be very greatful. My fiddle is here:
http://jsfiddle.net/Lm2fa/1/
EDIT:to test this please click on the open/close menu button (top left hamburger) then without moving your mouse click the button again to close the nav.. you shoul only experience the :hover event when you click or move your mouse
EDIT:this seems to definitely be occurring on OSX Chrome, OSX Safari (havent got a PC to test with)
One of my sites has a horizontal navigation bar which is created using a list. Besides a small bug in Firefox the list looks & works fine by now - except in Opera 11.61. There the list elements won't show up at all! As the list is the site's main navigation it is nested inside a nav element. So far my debugging showed that this is where the problem is.
When I remove any background information (like background-image or background-color) from the nav element the list is still invisible - I can see the body's background-color.
Also assigning different z-index values did nothing. But removing the nav element helps - when there is no nav the list shows up.
I created a small test case illustrating the problem (remember: Must be opened with Opera.): http://jsfiddle.net/sX5KF/
Do you have any clue why this problem occurs? Is there a fault in my code or is this just something like a bug in Opera? What can I do about it?
Alright I found the mistake. Opera displays nothing because I set content: ""; on the after-element. Other browsers seem to ignore it, but not Opera. I set it because I read it is needed, but actually it works even without content: "";.
See http://www.tuxx.nl/internationaal/vliegafstanden/internationaal/. Now scroll down and you see a button bar and one button with Doorsturen on it. Now, it works fine in Chrome, Firefox, but in Internet Explorer 8 you can see an e-mail icon. I looked where it came from and I saw that Sharethis automatically puts an image inside the button. I tried to get rid of that, but that didn't work. How can I remove this image/icon?
Use firebug to see if it has classes and use css to hide it with display:none;
If it does not have any class/id you could try to catch it with css selector img[src="/*YOUR IMAGE SRC*/"
To better help you I need to see some code ;)
Found an annoying bug today which crashed chrome and safari (so all webkit browsers?) with just CSS.
It's a hover menu, hovering over an element then displaying the next dropdown level. Works perfectly in all other browsers.
See here, top left 'rn': http://test.davebowker.com/rn-hover/
Hope someone has some thoughts, or knows a little more about webkit than I do. I'm sure it's css, as I've disabled all javascript, and also ran the dropdown in a fresh page all on its own. I also know it's the hover + display:block that is causing it. - Just not sure how to fix it. Maybe someone else has run into this bug?
Cheers,
Dave
EDIT: Included change made by Emily below. http://test.davebowker.com/rn-hover-fix/
Change
.ukn-network-jumper strong:hover + ul,
.ukn-network-jumper ul:hover {
display:block;
}
to
.ukn-network-jumper strong:hover + ul,
.ukn-network-jumper:hover ul {
display:block;
}
You don't want to display the ul when you are hovering the ul but when you are hovering the parent div.