CSS hover fix

[johnflufin]

The double anchor tags on parent links (< a >< a >link< /a >< /a >) causes hover issues at least in FF (text remains white if hovering over areas outside text). The following CSS makes it behave more consistently plus colors the arrow appropriately.

.slicknav_nav a:hover a, .slicknav_nav a:hover .slicknav_arrow { color: #222; }

[ComputerWolf]

@johnflufin, allowing parent links is supported, but because it causes nested anchor tags it is really discouraged. The CSS has not been optimized for these use cases, but can easily be overridden to function as desired.

[johnflufin]

I think you misunderstood my post. Let me try again.

Ok so using the default CSS and allowParentLinks set to false, hovering over parent links does not change the text and arrow color like it does when hovering over non-parent links. The parent link text and arrow remain white. It doesn't matter if I hover directly over the parent link text or the empty areas beside it.

With allowParentLinks set to true, hovering directly over parent link text changes the text color like non-parent links but the arrow remains white. The parent link text and arrow are white when hovering over the empty areas beside the text.

I have confirmed this behavior in FF and Safari. Other browsers may behave differently.

I would post screenshots to show you but it's not letting me do that for some reason.

Looking at the CSS again, this is partly caused by line 89 (color:#fff;). Removing this line and adding the following CSS fixes this regardless of the allowParentLinks setting.

.slicknav_nav a:hover a, .slicknav_nav a:hover .slicknav_arrow { color: #222; }

Or adding ".slicknav_nav a.slicknav_item:hover" to this code overrides line 89 for anyone using the current CSS.