CODEWITHSUNDEEP
htmlcssmenunavigationdropdown
SimonA
SimonA

Reputation: 135

Dropdown menu won't show with CSS

I'm following this guide from weSchools to make a dropdown menu in my navigation bar.

My problem is it won't show unless I remove the CSS property overflow: hidden from the ul class. This ruins the layout of the page and removes background colours etc.

I've tried display: block toggled on/off but the dropdown menu doesn't appear either way, as it does with the w3school tutorial.

I think there is maybe some problem with using a custom class .sticky rather than ul directly in the CSS, is it inheriting or not inheriting something?

Here is my HTML/CSS. I've gone over it multiple times to compare to the w3schools example and can't find a difference other than the ul tag. If I remove .sticky from the ul nav list then it loses formatting and affects another ul at the footer. So I need to define a custom class for this header nav list.

.sticky {
    /*float: right;*/
    /*color: white;*/
    list-style-type: none;
    /*width: 100%;*/
    margin: 0;
    padding: 0;
    overflow: hidden;

    border-radius: 0 0 10px 10px;
    background-color: #333;
    position: sticky;
    top: 0;
    z-index: 2;
}

li {
    float: right;
    /*padding-right: 20px;*/
    /*padding-left: 20px;*/
    color: white;
}

li a, .dropBtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;

    font-family: monospace;
    border-bottom: 2px solid #333;
    /*margin-bottom: 10px;*/
}

li a:hover, .dropdown:hover .dropBtn {
    /*background-color: #454542;*/
    text-decoration: none;
    color: white;
    /*border-radius: 10%;*/
    padding: 14px 16px;
    border-bottom: 2px solid #fff922;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content{
    display: block;
    /*border-bottom: 2px solid #fff922;*/
}

li a:active {
    /*background-color: deeppink;*/
    /*    add some transition here */
}
<ul class="sticky">
    <li><a class="active" href="#contact">Contact</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#about">About</a></li>
    <li class="dropdown">
            <a href="javascript:void(0)" class="dropBtn">Dropdown</a>
            <div class="dropdown-content">
                <a href="#">Item</a>
                <a href="#">Item</a>
                <a href="#">Item</a>
                <a href="#">Item</a>
            </div>
    </li>
    <li><a href="#home">Home</a></li>
</ul>

Upvotes: 0

Views: 92

Answers (4)

Manjuboyz
Manjuboyz

Reputation: 7066

Remove position:sticky; from the selector, sticky is a keyword so I have changed that to Links for reference.

.Links {
  /*float: right;*/
  /*color: white;*/
  list-style-type: none;
  /*width: 100%;*/
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0 0 10px 10px;
  background-color: #333;
  top: 0;
  z-index: 2;
}

li {
  float: right;
  /*padding-right: 20px;*/
  /*padding-left: 20px;*/
  color: white;
}

li a,
.dropBtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: monospace;
  border-bottom: 2px solid #333;
  /*margin-bottom: 10px;*/
}

li a:hover,
.dropdown:hover .dropBtn {
  /*background-color: #454542;*/
  text-decoration: none;
  color: white;
  /*border-radius: 10%;*/
  padding: 14px 16px;
  border-bottom: 2px solid #fff922;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  background-color: red;
}

.dropdown-content a:hover {
  background-color: red;
}

.dropdown:hover .dropdown-content {
  display: block;
  /*border-bottom: 2px solid #fff922;*/
}
<ul class="Links">
  <li><a class="active" href="#contact">Contact</a></li>
  <li><a href="#">Projects</a></li>
  <li><a href="#about">About</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropBtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Item</a>
      <a href="#">Item</a>
      <a href="#">Item</a>
      <a href="#">Item</a>
    </div>
  </li>
  <li><a href="#home">Home</a></li>
</ul>

Upvotes: 1

noahshotz
noahshotz

Reputation: 57

Fully fixed including the styling: https://jsfiddle.net/L9nw5et0/

.sticky {
    list-style-type: none;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0 0 10px 10px;
    background-color: #333;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
}

li {
    float: right;
    color: white;
    margin: 0;
}

li a,
.dropBtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: monospace;
    padding-bottom: 16px;
}

li a:hover,
.dropdown:hover .dropBtn {
    text-decoration: none;
    color: white;
    padding: 14px 16px;
    border-bottom: 2px solid #fff922;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #333;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    padding: 12px 16px;
    border-radius: 0 0 10px 10px;
}

.dropdown-content a {
    color: white;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown:hover .dropdown-content {
    display: block;
}

Upvotes: 1

slumbergeist
slumbergeist

Reputation: 1538

The problem is you are making the li elements float: right

The float property takes the element out of the normal flow.

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow.

So, your ul effectively don't have any height when rendered hence causing this issue. Just remove float from the li style rule and make it display: inline-block.

.sticky {
    /*float: right;*/
    /*color: white;*/
    list-style-type: none;
    /*width: 100%;*/
    margin: 0;
    padding: 0;
    border-radius: 0 0 10px 10px;
    background-color: #333;
    position: sticky;
    top: 0;
    z-index: 2;
}

li {
    display:inline-block;
    color: white;
}

li a, .dropBtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;

    font-family: monospace;
    border-bottom: 2px solid #333;
    /*margin-bottom: 10px;*/
}

li a:hover, .dropdown:hover .dropBtn {
    /*background-color: #454542;*/
    text-decoration: none;
    color: white;
    /*border-radius: 10%;*/
    padding: 14px 16px;
    border-bottom: 2px solid #fff922;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
    background: #000;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content{
    display: block;
    /*border-bottom: 2px solid #fff922;*/
}

li a:active {
    /*background-color: deeppink;*/
    /*    add some transition here */
}
<ul class="sticky">
    <li><a class="active" href="#contact">Contact</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#about">About</a></li>
    <li class="dropdown">
            <a href="javascript:void(0)" class="dropBtn">Dropdown</a>
            <div class="dropdown-content">
                <a href="#">Item</a>
                <a href="#">Item</a>
                <a href="#">Item</a>
                <a href="#">Item</a>
            </div>
    </li>
    <li><a href="#home">Home</a></li>
</ul>

Upvotes: 1

Grzegorz T.
Grzegorz T.

Reputation: 4153

Of course it can be sticky ;)

.sticky {
  /* float: right; */
  /* color: white; */
  list-style-type: none;
  /* width: 100%; */
  margin: 0;
  padding: 0;
  /* overflow: hidden; */
  border-radius: 0 0 10px 10px;
  background-color: #333;
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: row-reverse;
}

li {
  float: right;
  /*padding-right: 20px;*/
  /*padding-left: 20px;*/
  color: white;
}

li a,
.dropBtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: monospace;
  border-bottom: 2px solid #333;
  /*margin-bottom: 10px;*/
}

li a:hover,
.dropdown:hover .dropBtn {
  /*background-color: #454542;*/
  text-decoration: none;
  color: white;
  /*border-radius: 10%;*/
  padding: 14px 16px;
  border-bottom: 2px solid #fff922;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
  /*border-bottom: 2px solid #fff922;*/
}

li a:active {
  /*background-color: deeppink;*/
  /*    add some transition here */
}
<ul class="sticky">
  <li><a class="active" href="#contact">Contact</a></li>
  <li><a href="#">Projects</a></li>
  <li><a href="#about">About</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropBtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Item</a>
      <a href="#">Item</a>
      <a href="#">Item</a>
      <a href="#">Item</a>
    </div>
  </li>
  <li><a href="#home">Home</a></li>
</ul>

test <br> test <br> test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test
<br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test
<br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test
<br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>

Upvotes: 1

Related Questions