I have failed to wrap my head around CSS, and made a complete mess of my super fish "menu bar". This was due, in small part only, to the original CSS file being more than a little confusing.
My goal is simple. In its natural resting state, any menu item has orange text with a white background. When you are hovering/active, it should be white text with an orange background. Simplicity itself.
But that is not what I have. Among the issues I see…
1) when you open one of the items in the menu bar, it draws the pull-down menu as expected. However, I can also see that a rectangle the width of the main menu item and the height of the pull-down menu is floating in the background(semi-transparent colours, if you're wondering). Can I remove this?
2) the main menu items do not change the color of the text when you hover. I do not know which selector to use… I changed ".sf-menu a:focus" with no effect. Perhaps some other selector is overriding? Or is this just the wrong one?
3) all of the above is especially odd, because the main menus (as opposed to the menu bar itself) works almost perfectly. The colours are just what I want, and the behaviour is fine. Except one minor thing… (1) applies here too.
4) The cherry on top is that the menus are not wide enough for long menu terms, and some of the text ends up running off the side of the menus (and subs).
Is there a kind soul out there willing to take a look? I've made a pen for this (I think!):
I have failed to wrap my head around CSS, and made a complete mess of my super fish "menu bar". This was due, in small part only, to the original CSS file being more than a little confusing.
My goal is simple. In its natural resting state, any menu item has orange text with a white background. When you are hovering/active, it should be white text with an orange background. Simplicity itself.
But that is not what I have. Among the issues I see…
1) when you open one of the items in the menu bar, it draws the pull-down menu as expected. However, I can also see that a rectangle the width of the main menu item and the height of the pull-down menu is floating in the background(semi-transparent colours, if you're wondering). Can I remove this?
2) the main menu items do not change the color of the text when you hover. I do not know which selector to use… I changed ".sf-menu a:focus" with no effect. Perhaps some other selector is overriding? Or is this just the wrong one?
3) all of the above is especially odd, because the main menus (as opposed to the menu bar itself) works almost perfectly. The colours are just what I want, and the behaviour is fine. Except one minor thing… (1) applies here too.
4) The cherry on top is that the menus are not wide enough for long menu terms, and some of the text ends up running off the side of the menus (and subs).
Is there a kind soul out there willing to take a look? I've made a pen for this (I think!):
http://codepen.io/anon/pen/HmELc