Solution: Appears that IE does not accept alpha values on hex colours: ie, #61CBFD22 doesn't register because the 22 is the alpha value. #61CBFD registers.
I'm trying to increase readability and navigation on our site with a little CSS on the global navigation (See below for CSS). It works flawlessly in Chrome, but in IE, none of the :hover selectors work.
The :hover selectors are just to add a highlight to the currently hovered item, to more easily see what element is selected.
Here's some stats on what's going on:
Using IE 11, version 11.590.17134.0, with the meta tag <meta http-equiv="X-UA-Compatible" content="IE=edge"/> at the top of the <head> of the master page.
- It doesn't work with
IE=10,IE=11, orIE=Edge(I've tried all 3). - I've tried marking all the items under the
:hoverto be!importantand that doesn't work either so I don't think it's a precedence issue. - Tried making IE not run in compatibility mode for Intranets
- Tried changing
[Selector]:hoverto[Selector] .hoverbecause I noticed a Class change on hovered elements that reflect that change.
Not sure what else there is to try. I'm sure that :hover is valid in IE 11... Any help would be appreciated.
/*** Top Navigaion Static Menu Items ***/ .ms-core-listMenu-horizontalBox li.static { border: 1px solid transparent; background: url("/_layouts/Images/selbg.png") repeat-x left top; } /*** Top Navigaion Static Menu Item Links ***/ .ms-core-listMenu-horizontalBox li.static>.ms-core-listMenu-item { white-space: nowrap; border: 1px solid transparent; padding: 10px; padding-left: 20px; margin-right: 1px; color: #000; } /* Top Navigation static Menu Item Links Hover Style */ .ms-core-listMenu-horizontalBox li.static>.ms-core-listMenu-item:hover { background: url("/_layouts/Images/selbg.png") repeat-x left top; background-color: #61CBFD22; color: #000; text-decoration: none; } /*** Top Navigaion Static Menu Selected ***/ .ms-core-listMenu-horizontalBox li.selected a.selected { background: url("/_layouts/Images/selbg.png") repeat-x left top; color: #000; text-decoration: none; border: 1px #134072 solid; padding: 10px 10px; margin: 1px; } /*** Sub-Menu/Flyover/Dynamic Menu Container ***/ ul.dynamic { border: 1px solid #007; padding: 1px; margin-top: 5px; font-size: 1.1em; width: auto !important; white-space: nowrap; } /*** Sub-Menu Items (HyperLinks) Style ***/ ul.dynamic .ms-core-listMenu-item { padding: 0px 20px 0px 20px; white-space: nowrap; color: #000; } /*** Sub-Menu Items (HyperLinks) Hover Style ***/ ul.dynamic .ms-core-listMenu-item:hover { background-color: #61CBFD22; color: #000; } /** Hide "Edit Links" ***/ .ms-listMenu-editLink { display: none !important; } As per comments:
Emulation Tab in F12 console: 
When checking the a: option in the f12 screen, and selecting :hover, there are no changes to the CSS being applied for most items. The actual a tag does change, and the background-color I used is underlined.
#61CBFD22won't work, but#61CBFDwill. If you wanted to post an answer I can mark it as correct as your comment lead to the solution. Thanks!