lara B Posted October 29, 2020 Share Posted October 29, 2020 I am trying to use a dropdown menu with a fixed navigation bar. The dropdown links are showing all the time and teh navigation bar has grown to include them so it is wider than normal. below is the CSS code, attached is the file which tries to use it. Why does my navigation bar not do the same as teh one in W3schools? /* Style the navigation bar links */ ul { list-style-type: none; font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; overflow: hidden; background-color: #008080; position: fixed; top: 0; width: 100%; } li { float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: lightseagreen; } li.dropdown { display:inline-block; } .dropdown-content { display: none; position: absolute; background-color: #008080; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color:black; padding:12px 16px; text-decoration: none; display: block; text-align:left; } .dropdown-content a:hover {background-color: #f1f1f1;} .dropdown:hover .dropdown-content { display: block; } Services.html Link to comment Share on other sites More sharing options...
niche Posted October 29, 2020 Share Posted October 29, 2020 what's the w3schools link for comparison? Link to comment Share on other sites More sharing options...
lara B Posted October 30, 2020 Author Share Posted October 30, 2020 (edited) https://www.w3schools.com/howto/howto_css_dropdown.asp ooh, no it isn't that one, but I think this may be the link I should have used. Edited October 30, 2020 by lara B wrong link Link to comment Share on other sites More sharing options...
dsonesuk Posted October 30, 2020 Share Posted October 30, 2020 (edited) You are breaking the rules of having child elements within ul element that are not! li elements. The closest correct option you can have, is <div class="topnav"> <ul> <li><a href="index.html">Home</a><span class="hide"></span></li> <li><a href="About.html">About</a></li> <li><a href="Terms.html">Terms</a></li> <li><a href="Links.html">Links</a></li> <li><a href="Contact.html">Contact</a></li> <li><a class="active" href="Services.html">Classes</a></li> <li> <div class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Dropdown</a> <div class="dropdown-content"> <a href= "upton.html">Upton St Leonards</a> <a href="kingsway.html">Kingsway</a> </div> </div> </li> </ul> </div> You will have to remove overflow: hidden from topnav, and reset li .dropdown to li .dropdown { position: relative; display:inline-block; } You require position: relative to keep the position: absolute content at the correct location, also i would apply position: fixed properties to .topnav, Your link tag has a href link to google fonts and also includes a href link to style.css. no one uses <center>...</center> anymore, and you not allowed to invent new closing tags '</p2>' and each p tag must have relative closing tag of </p> Edited October 30, 2020 by dsonesuk Link to comment Share on other sites More sharing options...
lara B Posted November 11, 2020 Author Share Posted November 11, 2020 Hi @dsonesuk, Thanks for your help, sorry it has taken me some time to get back to this. The above suggested solution has changed my topnav to a side nav, any idea why or how? L Link to comment Share on other sites More sharing options...
dsonesuk Posted November 11, 2020 Share Posted November 11, 2020 I assume you did apply position: fixed; top: 0; width: 100%; To topnav? Link to comment Share on other sites More sharing options...
lara B Posted November 19, 2020 Author Share Posted November 19, 2020 somehow the dropdown part does not show anymore. can anyone point me to something I can look at which would help please? Link to comment Share on other sites More sharing options...
dsonesuk Posted November 19, 2020 Share Posted November 19, 2020 Sounds like overflow: hidden; was not removed. Anything outside a element boundary with overflow: hidden; property does what it suggests, hides it! Link to comment Share on other sites More sharing options...
lara B Posted November 20, 2020 Author Share Posted November 20, 2020 22 hours ago, dsonesuk said: Sounds like overflow: hidden; was not removed. Anything outside a element boundary with overflow: hidden; property does what it suggests, hides it! Yes, now it shows. thank you. Now can anyone explain why I have a black line above every link I hover over? 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