Jump to content

dropdown of navbar doesnt work


bahrami.amin@yahoo.com
 Share

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

Link to comment
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.

Link to comment
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
Link to comment
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;
}

 

Link to comment
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
 Share

×
×
  • Create New...