Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Sub Menu is Transparent After Hover. Undesired

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #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!

    #283883
    Beverleyh
    Participant

    Just 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 button lis.

    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.

    #283898
    [email protected]
    Participant

    I 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.

    #283909
    Beverleyh
    Participant

    I 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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.