bahrami.amin@yahoo.com Posted February 13, 2018 Share Posted February 13, 2018 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 More sharing options...
Ingolme Posted February 13, 2018 Share Posted February 13, 2018 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 More sharing options...
bahrami.amin@yahoo.com Posted February 14, 2018 Author Share Posted February 14, 2018 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted February 14, 2018 Share Posted February 14, 2018 Get rid of the bootstrap stylesheet. That's the one that's adding all the additional styles that are breaking the nav bar. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 14, 2018 Share Posted February 14, 2018 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now