“position: fixed” ruins the dropdown menu in CSS webpage
Question
I am creating a webpage in which when I hover over the .Soccer section, it will dropdown and show Link1, Link2, Link3.
Without the position: fixed; , the code works perfectly fine. As I want the heading in top of the webpage, I put position: fixed;
But as soon as I put that on, the dropdown button for "Soccer" does not work.
html { background-image: url("Images/BackgroundImageI.jpg"); background-repeat: no-repeat; } body { background-color: White; color: Black; margin-left: 0%; margin-right: 0%; margin-top: 40%; margin-bottom: 0%; border: 10px outset Gray; } h1 { font-family: Arial, Verdana, Geneva, sans-serrif; color: teal; text-align: center; } p { font-family: Arial, Verdana, Geneva, sans-serrif, serrif; font-size: 12px; font-style: normal; font-weight: normal; line-height: 24px; } ul { margin-left: 0%; margin-right: 0%; margin-top: 0%; list-style-type: none; margin: 0; padding: 0; top: 0; width: 100%; overflow: hidden; background-color: #333; position: fixed; /* Removing this makes the dropdown work */ } li { float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .Soccer:hover .dropbtn { background-color: teal; } li.Soccer { display: inline-block; } .Soccer-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .Soccer-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .Soccer-content a:hover { background-color: teal } .Soccer:hover .Soccer-content { display: block; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <link rel="stylesheet" href="testeditor.css" type="text/css"> </head> <body> <ul> <li><a href="brokenlink.html">Home</a></li> <li><a href="#brokenlink.html">News</a></li> <li class="Soccer"> <a href="javascript:void(0)" class="dropbtn">Soccer</a> <div class="Soccer-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> </ul> <h3>Soccer Menu inside a Navigation Bar</h3> <p>Hover over the "Soccer" link to see the Soccer menu.</p> </body> </html>
Please ask me if you do not understand the concept of what I am trying to do. And if you do understand, please help me.
This is my first post so it might be a bit off compared to other posts.
2 answers
solution1
3 ACCPTED 2017-10-03 00:29:40
You had a overflow: hidden on your ul element. Therefore the dropdown wasn't shown. Removing it makes the dropdown appear again.
html { background-image: url("Images/BackgroundImageI.jpg"); background-repeat: no-repeat; } body { background-color: White; color: Black; margin-left: 0%; margin-right: 0%; margin-top: 40%; margin-bottom: 0%; border: 10px outset Gray; } h1 { font-family: Arial, Verdana, Geneva, sans-serrif; color: teal; text-align: center; } p { font-family: Arial, Verdana, Geneva, sans-serrif, serrif; font-size: 12px; font-style: normal; font-weight: normal; line-height: 24px; } ul { margin-left: 0%; margin-right: 0%; margin-top: 0%; list-style-type: none; margin: 0; padding: 0; top: 0; width: 100%; background-color: #333; position: fixed; } li { float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .Soccer:hover .dropbtn { background-color: teal; } li.Soccer { display: inline-block; } .Soccer-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .Soccer-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .Soccer-content a:hover { background-color: teal } .Soccer:hover .Soccer-content { display: block; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <link rel="stylesheet" href="testeditor.css" type="text/css"> </head> <body> <ul> <li><a href="brokenlink.html">Home</a></li> <li><a href="#brokenlink.html">News</a></li> <li class="Soccer"> <a href="javascript:void(0)" class="dropbtn">Soccer</a> <div class="Soccer-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> </ul> <h3>Soccer Menu inside a Navigation Bar</h3> <p>Hover over the "Soccer" link to see the Soccer menu.</p> </body> </html>
solution2
0 2017-10-03 00:30:29
Just change the position of .Soccer-content to fixed , too
html{ background-image: url("Images/BackgroundImageI.jpg"); background-repeat: no-repeat; } body { background-color: White; color: Black; margin-left: 0%; margin-right: 0%; margin-top: 40%; margin-bottom: 0%; border: 10px outset Gray; } h1 { font-family: Arial, Verdana, Geneva, sans-serrif; color: teal; text-align: center; } p { font-family: Arial, Verdana, Geneva, sans-serrif, serrif; font-size: 12px; font-style: normal; font-weight: normal; line-height: 24px; } ul { margin-left: 0%; margin-right: 0%; margin-top: 0%; list-style-type: none; margin: 0; padding: 0; top: 0; width: 100%; overflow: hidden; background-color: #333; position: fixed; } li { float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .Soccer:hover .dropbtn { background-color: teal; } li.Soccer { display: inline-block; } .Soccer-content { display: none; position: fixed; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .Soccer-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .Soccer-content a:hover {background-color: teal} .Soccer:hover .Soccer-content { display: block; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <link rel="stylesheet" href="testeditor.css" type="text/css"> </head> <body> <ul> <li><a href="brokenlink.html">Home</a></li> <li><a href="#brokenlink.html">News</a></li> <li class="Soccer"> <a href="javascript:void(0)" class="dropbtn">Soccer</a> <div class="Soccer-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> </ul> <h3>Soccer Menu inside a Navigation Bar</h3> <p>Hover over the "Soccer" link to see the Soccer menu.</p> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Position fixed dropdown menu
Adding position: fixed; ruins header
Adding Position: fixed; ruins the header
css position dropdown menu issue
Fixed position sidebar and dropdown menu near it
Dropdown menu not clickable after fixed position
CSS Dropdown Menu Without Fixed Width
CSS Changing position of div to absolute ruins the layout
css position fixed menu with 100% height and offset
DIV will not position fixed with experimental CSS3 menu
Related Tags