"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.

cyr_x · Accepted Answer

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>

Johannes · Answer

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>

"position: fixed" ruins the dropdown menu in CSS webpage

Tags:

html

css

Axceed

2 Answers

cyr_x

Johannes

Recent Activity

Donate For Us

"position: fixed" ruins the dropdown menu in CSS webpage

Tags:

html

css

Axceed

2 Answers

cyr_x

Johannes

Related questions

Recent Activity

Donate For Us