/    Sign up×
Community /Pin to ProfileBookmark

CSS dropdown doesn’t activate on hover

Copy linkTweet thisAlerts:
Dec 06.2018

Hello all ?

I’m brand new here as of today…

I found a nice code snippet for a CSS dropdown nav on W3Schools. Here’s the link: https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp

Everything looks great as it should, but the dropdown menu doesn’t show up on hover as it’s supposed to on anything larger than 600px. At 600px and less, the dropdown menu works fine from within the mobile menu.

Here’s a link to the project.
https://www.creativevisualmarketing.com/experimenting-with-dropdown-nav/

If anyone is willing to help me figure out why the dropdown menu won’t display above 600px, I’d sure appreciate it. I’m not sure why the project works on W3Schools, but not in my project. I’ve checked the code multiple times and it seems I’ve copied/pasted it correctly…

  • – Randy

    • to post a comment
    CSS

    5 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @SempervivumDec 06.2018 — There are two issues:

    1. Obviously the code of w3schools interferes with Bootstrap; When I remove the inclusion of Bootstrop hover is working. I recommend to search Bootstrap for a suitable menu instead of w3schools.

    2. As the submenu is positioned absolutely it doesn't expand the wrapping containers when becoming visible. Therefore a scrollbar appears at the right when hovering. I was able to work around this by setting the height of the body to 100vh and setting overflow:visible to the container .page-container. However this will become obsolete when you add some content to your page.
    Copy linkTweet thisAlerts:
    @CreativeVMauthorDec 12.2018 — @Sempervivum#1598661 Hey, thank you so much for replying. I have a couple questions...

    Why do you say that "Obviously the code of w3schools interferes with Bootstrap..." Isn't it just html, css and js? Why would that interfere with Bootstrap? (I'm not saying you're wrong, just saying I don't understand)

    Do you know how I'd adjust the code so that only the dropdown menu li a's will show up (and not the entire width of the screen)

    Thank You again for any help!

  • - Randy
    • Copy linkTweet thisAlerts:
    @SempervivumDec 12.2018 — Hallo CreativeWM
    Why do you say that "Obviously the code of w3schools interferes with Bootstrap..." Isn't it just html, css and js? Why would that interfere with Bootstrap?[/quote]
    This was just a sneaky suspicion but I verified it by use of the developer tools of Opera: I deactivated the inclusion of the Bootstrap CSS and look - the scrollbar appeared when hovering:

    [upl-image-preview url=https://www.webdeveloper.com/forum/assets/files/2018-12-12/1544649241-583010-w3menu01.png]

    Then I set the container's height to 100vh and the submenu got visible:

    [upl-image-preview url=https://www.webdeveloper.com/forum/assets/files/2018-12-12/1544649335-391322-w3menu02.png]

    Unfortunately I do not know exactly why the Bootstrap CSS prevents the sub menu from opening and therefore I cannot give instructions how to fix this. Instead I recommened to search for a menu that is provided by Bootstrap.
    Copy linkTweet thisAlerts:
    @SempervivumDec 12.2018 — PS: Another sneaky suspicion came to my mind: Does Bootstrap also use the class "dropdown"? I downloaded your page and changed the class to "mydropdown" and look - the submenu became visible when hovering. Additionally I added some content to the page to remove the scrollbar and then everything worked fine:

    [upl-image-preview url=https://www.webdeveloper.com/forum/assets/files/2018-12-12/1544650994-369281-w3nav.png]
    Copy linkTweet thisAlerts:
    @rootDec 13.2018 — [[2,3,4,8],[2,8]]
    ×

    Success!

    Help @CreativeVM spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 4.24,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...