dropdown of navbar doesnt work

[bahrami.amin@yahoo.com]

hi all

I want to build your suggested navbar(https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar) in my design.

I have no changes in your code and I just have copied that to my html code.

but the dropdown menue doesn't work and its contents are not shown in hover!!!

can anybody tell me why?

 

ClickPart.html

[Ingolme]

The problem is that both .navbar and .dropdown have "overflow: hidden" on them, which prevents any of their children from being visible if they escape the boundaries of their parents.

[bahrami.amin@yahoo.com]

Thanks

But it is working correctly in

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar

And i just have copied that in my code

I removed absolute property in dropdown-content then i have been able to see contents but in a wrong way(navbar goes down completely)

I think the problem is develeped beacuase of absolute

Can anyone correct my code?

Edited February 14, 2018 by bahrami.amin@yahoo.com

[Ingolme]

Get rid of the bootstrap stylesheet. That's the one that's adding all the additional styles that are breaking the nav bar.

[dsonesuk]

Don't! get rid of bootstrap stylesheet unless you are not! planning to use it, as you seem to be using it for search form etc.

To use this menu you have to override the styles bootstrap is applying, a good way of doing this is to give it a id ref, then reset the applied bootstrap styling by referring to this id to give it higher precedence over just the bootstrap .navbar class.

<div id="navbar-top" class="navbar">
    <a href="#home">Home</a>
    <a href="#news">News</a>
    <div class="dropdown">
        <button class="dropbtn">Dropdown
            <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div>
</div>

#navbar-top.navbar, #navbar-top.navbar .dropdown {
    position: static;
}