- This topic is empty.
-
AuthorPosts
-
February 27, 2019 at 3:53 pm #283880[email protected]Participant
Good day!
When hovering over a sub menu root and then move off of it the sub menu root is transparent until the sub menu closes/collapses. How can I stop that?
EX: if you visit http://animashighschool.com/ and go to About Us then hover over Student Support then move off of Student Support the Student Support tab is transparent until the sub menu closes. I would like to to remain green.
Thanks!
February 27, 2019 at 11:11 pm #283883BeverleyhParticipantJust speculating… on mobile…
Try giving the dropdown container (rather than the individual buttons) a background-color to fall back to – so, if the menu is a
ul
, target that, along with the buttonli
s.You can use the developer toolbar to test new styles on the fly before you transfer them to the stylesheet – that’s F12 in most browsers.
If you still need help, please extract just the menu to a reduced CodePen demo so that it is easier for us to troubleshoot. We don’t need all the distractions of your whole codebase. Also explain/show us what you’ve tried to fix this yourself so that we’re not re-treading the same ground.
February 28, 2019 at 11:04 am #283898[email protected]ParticipantI ended up just removing most the sub menus (except News and Events> School Calendar).
I should have mentioned this is a WordPress site running Theme Island – Campus.
I did try a few different ul attributes but it would not change the transparency. What does the “after hover” attribute code even look like? Where is it defined?
I researched this a bit before posting here and tried a lot of different things I found but nothing seemed to look like it was for after hover for a submenu.
February 28, 2019 at 11:32 pm #283909BeverleyhParticipantI did try a few different ul attributes but it would not change the transparency.
What did you try?
What does the “after hover” attribute code even look like? Where is it defined?
I don’t know what you mean by “after hover”. There’s no such thing as behavioural “do X after a hover action” selector in CSS (with JavaScript, maybe). Neither can you target a parent element of a hovered element (there’s no “parent of” selector in CSS so you can’t look backwards up the DOM). But if you colour the background of the parent element/container, event if the individual button became transparent, the base colour from the overall containing parent should provide suitable fallback.
But I can’t offer any specific advice via this platform, and I don’t fancy debugging in a whole site codebase when I do get back to desktop. If you transfer the menu to a CodePen however, it will be much easier for us to troubleshoot and offer suggestions on any device, so your chances of receiving help will increase. Please use the developer toolbar to extract the pertinent code – that’s F12 in most browsers. Help us to help you.
Where is it defined?
CSS is defined in a stylesheet. These can be in an external .css file, internal in the
head
element, or inline in an element itself. It might also be applied on the fly with JavaScript. Again, you can use the developer toolbar to see where/how specific element CSS is defined/coming from when you inspect elements/your site menu via F12. -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.