Jump to content
bahrami.amin@yahoo.com

dropdown of navbar doesnt work

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by bahrami.amin@yahoo.com

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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;
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×