Navigation menu dropdown items not dropping down

HTML & CSS
1

I am added three items to my navigation menu. It added soem css to get it to fall in line. But it keeps pushing up my serviices title. I have tried many different ways to try to solve the problem. Here is a copy of my code.

//HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!------------------------------ css stylesheets -------------------------------------->
  <link rel='stylesheet'  href='css/utilities.css' />
  <link rel='stylesheet' media='screen and (min-width: 0px) and (max-width: 480px)' href='css/mobile.css' />
  <link rel='stylesheet' media='screen and (min-width: 481px) and (max-width: 768px)' href='css/tablet.css' />
  <link rel='stylesheet' media='screen and (min-width: 769px) and (max-width: 1279px)' href='css/landscape.css' />
  <link rel='stylesheet' media='screen and (min-width: 1280px) ' href='css/large.css' />

  
</head>
<body>
  <header>
    <!---------------------- MAIN NAVIGATION START  -->
    <div class="container"> 
      <a href="#" class="nav-branding">DEV.</a>
        <nav class="navbar">
          
          <ul class="nav-menu">
            <li class="nav-item">
              <a href="#" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">About</a>
            </li>

            <li class="nav-item">
              <a href="#" class="nav-link">Services</a>
              <ul class="dropdown">
                  <li><a href="#">Service 1</a></li>
                  <li><a href="#">Service 2</a></li>
                  <li><a href="#">Service 3</a></li>
              </ul>
          </li>
            
            
            <li class="nav-item">
              <a href="#" class="nav-link">Contact</a>
            </li>
          </ul>
          <div class="hamburger">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
          </div>
        </nav>
     </div>
     <!-------------------------MAIN NAVIGATION END  -->
   </header>
  
  





  <main>


  </main>
  

  <footer>
    <div class="footer-box box-1">
      <h2>About Us</h2>
      <p>We are a company that specializes in providing high-quality products and services. We are committed to providing our customers with the best possible experience.</p>
    </div>
    <div class="footer-box box-2">
      <h2>Contact Us</h2>
      <p>If you have any questions or concerns, please feel free to contact us. We would be happy to hear from you.</p>
    </div>
    <div class="footer-box box-3">
      <h2>Social Media</h2>
      <p>Follow us on social media to stay up-to-date on our latest products and services.</p>
    </div>
    <div class="footer-box box-4">
      <h2>Copyright</h2>
      <p>All rights reserved. Copyright 2023.</p>
    </div>


  </footer>
  <script src="script.js"></script>
</body>
</html>

//CSS CODE

@media screen and (min-width: 1280px) {
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  
  header {
    background-color: #262626;
  }
  
  li {
    list-style: none;
  }
  
  a {
    color: white;
    text-decoration: none;
  }
  
  .container {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  
  .navbar {
    min-height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .nav-branding {
    align-items: center;
    font-size: 2rem;
  }
  
  .nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
  }
  
  .nav-link {
    transition: 0.3s ease-out;
  }

  .nav-item {
    margin: 16px 0;
  }

  .nav-item .dropdown ul li {
    display: block;
  }

  .nav-menu.active {
    left: 0;
  }
  
  .nav-link:hover {
    color: dodgerblue;
  }

  footer {
    display: flex;
    flex-direction: row;  
  }

  .box-1, .box-2, .box-3, .box-4 {
    width: 25%;
  }
}
2

Are you trying to make the items appear on hover or do you want them to show all the time?

Usually you would show on hover like this:

.dropdown{
  opacity:0;
  position:absolute;
  top:200%;
  left:0;
  transition:.5s ease;
  pointer-events:none;
  white-space:nowrap;
  padding:10px 0;
  border:1px solid #f9f9f9;
}
.nav-item{position:relative;}
.nav-item:hover > ul.dropdown{
  top:100%;
  pointer-events:initial;
  opacity:1;
  background:black;
}
.nav-item:hover > ul.dropdown a{
  padding:5px 10px;
}

Bear in mind that this won;t work well on touch devices as they don;t have hover as such.

I;m also assuming that this is just part of your code as the screen is unstyled until I open my browser up to 1280px :wink:

.

3

I want to show when a user hovers over the services title

4

Its the desktop stylesheet. Its working in desktop size . I will work on getting it working in the tablet and mobile breakpoints next.

5

Good the code I gave you will do that :slight_smile:

1 Like
6

Thank you. I’ll keep working on it.

7

I am getting a issues with the the landscape version. The first was a to much margin between the li item when it dropped down. I found how to fix that.The second is that when I toggle the menu down the shows. But my logo diappaers. any suggestion on hoe to toggle doen the menu and keep the logo

@media screen and (min-width: 769px) and (max-width: 1279px) {
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  header {
    background-color: #262626;
  }

  li {
    list-style: none;
  }

  a {
    color: white;
    text-decoration: none;
  }

  .container {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }

  .navbar {
    min-height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .nav-branding {
    align-items: center;
    font-size: 2rem;
  }

  .nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* gap: 60px; */
  }

  .nav-link {
    transition: 0.3s ease-out;
    padding: 0;
  }

  .nav-item {
    position: relative;
    margin: 5px 5px;
  }
  
  li.nav-item {
    margin:0;
  }

  .nav-menu .nav-menu {
    position: absolute;
    top: -100%;
    left: 0;
    display: block;
    white-space: nowrap;
    transition: 1s ease;
    pointer-events: none;
    opacity: 0;
  }

  .nav-item:hover .nav-menu {
    top: 100%;
    opacity: 1;
    pointer-events: initial;
  }

  .dropdown {
    opacity: 0;
    position: absolute;
    top: 200%;
    left: 0;
    transition: 0.5s ease;
    pointer-events: none;
    white-space: nowrap;
    /* padding: 10px 0; */
  }

  .nav-item:hover > ul.dropdown {
    top: 100%;
    pointer-events: initial;
    opacity: 1;
    background: #262626;
  }

  .nav-link:hover {
    color: dodgerblue;
  }

  .hamburger {
    display: none;
    cursor: pointer;
  }

  .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: all 0.3s ease;
    background-color: white;
  }

  .hamburger {
    display: block;
  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-menu {
    position: fixed;
    left: -100%;
    gap: 0;
    flex-direction: column;
    background-color: #262626;
    width: 100%;
    text-align: center;
    transition: 0.3s;
  }

  .nav-link {
    margin:0;
    padding: 0;
  }

  ul.nav-menu.active {
    left: 0;
    

  
  }


footer {
  display: flex;
  flex-direction: row;
}

.box-1,
.box-2,
.box-3,
.box-4 {
  width: 25%;
}
}
8

@lancechise: please format your code so it will display correctly. I’ve edited your last two posts for you, but in future please use the </> button in the editor window, or place three backticks ``` on a line above your code, and three on a line below.

9

You need a higher z-index on the nav-branding if you want it to stay on top of the fixed menu.

.nav-branding{
  position:relative;
  z-index:2;
}

[Off Topic]
Note that a more efficient way to do media queries is only to style the differences. You are repeating whole blocks of code where 90% of it will be the same as before.

For example:

 * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  header {
    background-color: #262626;
  }

You are repeating that twice already and there is much more code like that.

The way I work is to start at desktop first (because its easier for me but it can be done in reverse just the same). So for desktop styles there would be no media query and the whole page styled without a media query in sight.

Then I will close the browser window smaller until the design looks awkward or something breaks or I need to go from 3 columns to one (or whatever) and then at that point only I will create a media query to make it fit nicely.

e.g.


@ media screen and (max-width:980px){
/* a few well chose n styles go here */
}

No need to mix min and max-width at the same time as that is too awkward to maintain in the long run and prone to error.

Once I’ve fixed the design at that point I will keep closing the browser window until it breaks again or looks awkward and then create another media query at that point. … and so on …

If you have a fluid site and a few well chosen media queries then with this method you cope for every device ever invented now or in the future without knowing anything about them. There are no set sizes for tablets and phones these days so you need a design-centric approach where the design dictates the breakpoints and not some imaginary device.

In the end you end up with much more precise (and less) code and with code that suits the design in hand.

10

So I got the logo to show. But now the services when you click on the services. It just goes over the contact instead of pushing it down. Any ideas whats causing that ?


@media screen and (min-width: 1280px) {
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  
  header {
    background-color: #262626;
  }
  
  li {
    list-style: none;
  }
  
  a {
    color: white;
    text-decoration: none;
  }
  
  .container {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  
  .navbar {
    min-height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .nav-branding {
    align-items: center;
    font-size: 2rem;
  }
  
  .nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
  }
  
  .nav-link {
    transition: 0.3s ease-out;
  }

  .nav-item{
    position:relative;
  }
  .nav-menu .nav-menu{
    position:absolute;
    top:-100%;
    left:0;
    display:block;
    white-space:nowrap;
    transition:1s ease;
    pointer-events:none;
    opacity:0;
  }
  .nav-item:hover .nav-menu{
    top:100%;
    opacity:1;
    pointer-events:initial;
  }

  /* .nav-item {
    margin: 16px 0;
  } */

  .dropdown{
    opacity:0;
    position:absolute;
    top:200%;
    left:0;
    transition:.5s ease;
    pointer-events:none;
    white-space:nowrap;
    padding:10px 0;
    /* border:1px solid #f9f9f9; */
    margin-top: 5px;
    background-color: #262626;
  }
  .nav-item{position:relative;}
  .nav-item:hover > ul.dropdown{
    top:100%;
    pointer-events:initial;
    opacity:1;
    background: #262626  ;
  }
  .nav-item:hover > ul.dropdown a{
    padding:5px 10px;
  }

  .nav-menu.active {
    left: 0;
  }
  
  .nav-link:hover {
    color: dodgerblue;
  }

  footer {
    display: flex;
    flex-direction: row;  
  }

  .box-1, .box-2, .box-3, .box-4 {
    width: 25%;
  }
}
11

I don’t think you posted the correct code above as that’s for the larger screen?

Taking what you posted so far and the html you posted I’ve put it into a codepen just to see where we are.

If I understand correctly you are making the nav vertical at this breakpoint and therefore you can no longer absolutely place it if you want it to take up space in the flow.

I’ve added that here as a very very rough guide.

.

12

Yes, I did drop the wronf css . Here’s is the correct.


@media screen and (min-width: 769px) and (max-width: 1279px) {
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  header {
    background-color: #262626;
  }

  li {
    list-style: none;
  }

  a {
    color: white;
    text-decoration: none;
  }

  .container {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }

  .navbar {
    min-height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .nav-branding {
    align-items: center;
    font-size: 2rem;
    z-index: 2;
    
  }

  .nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
  }

  .nav-link {
    transition: 0.3s ease-out;
    padding: 0;
  }

  .nav-item {
    position: relative;
    margin: 5px 5px;
  }
  
  li.nav-item {
    margin:0;
  }

  .nav-menu .nav-menu {
    position: absolute;
    top: -100%;
    left: 0;
    display: block;
    white-space: nowrap;
    transition: 1s ease;
    pointer-events: none;
    opacity: 0;
  }

  .nav-item:hover .nav-menu {
    top: 100%;
    opacity: 1;
    pointer-events: initial;
  }

  .dropdown {
    opacity: 0;
    position: absolute;
    top: 200%;
    left: 0;
    transition: 0.5s ease;
    pointer-events: none;
    white-space: nowrap;
    /* padding: 10px 0; */
  }

  .nav-item:hover > ul.dropdown {
    top: 100%;
    pointer-events: initial;
    opacity: 1;
    background: #262626;
  }

  .nav-link:hover {
    color: dodgerblue;
  }

  .hamburger {
    display: none;
    cursor: pointer;
  }

  .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: all 0.3s ease;
    background-color: white;
  }

  .hamburger {
    display: block;
  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-menu {
    position: fixed;
    left: -100%;
    gap: 0;
    flex-direction: column;
    background-color: #262626;
    width: 100%;
    text-align: center;
    transition: 0.3s;
    
  }

  .nav-link {
    margin:0;
    padding: 0;
  }

  ul.nav-menu.active {
    left: 0;
    
    

  
  }


footer {
  display: flex;
  flex-direction: row;
}

.box-1,
.box-2,
.box-3,
.box-4 {
  width: 25%;
}
}
13

No worries :slight_smile:

The answer is still the same in that you need to remove the absolute positioning from the drop-down to allow it back in the flow.

Even though my codepen doesn’t have the updated code it shows the basics of what you need to do as there are a few other changes needed. :slight_smile: BBC

14

I changed the dropdown position to relative. It is falling to to position. But with a big black space . You said there were some other things off. Please share . I’ll try them out to see how it works . here is my code for landscape view as of now.


@media screen and (min-width: 769px) and (max-width: 1279px) {
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  header {
    background-color: #262626;
  }

  li {
    list-style: none;
  }

  a {
    color: white;
    text-decoration: none;
  }

  .container {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }

  .navbar {
    min-height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .nav-branding {
    align-items: center;
    font-size: 2rem;
    z-index: 2;
    
  }

  .nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
  }

  .nav-link {
    transition: 0.3s ease-out;
    padding: 0;
  }

  .nav-item {
    position: relative;
    margin: 5px 5px;
  }
  
  li.nav-item {
    margin:0;
  }

  .nav-menu .nav-menu {
    position: absolute;
    top: -100%;
    left: 0;
    display: block;
    white-space: nowrap;
    transition: 1s ease;
    pointer-events: none;
    opacity: 0;
  }

  .nav-item:hover .nav-menu {
    top: 100%;
    opacity: 1;
    pointer-events: initial;
  }

  .dropdown {
    opacity: 0;
    position: relative;
    top: 200%;
    left: 0;
    transition: 0.5s ease;
    pointer-events: none;
    white-space: nowrap;
    /* padding: 10px 0; */
  }

  .nav-item:hover > ul.dropdown {
    top: 100%;
    pointer-events: initial;
    opacity: 1;
    background: #262626;
  }

  .nav-link:hover {
    color: dodgerblue;
  }

  .hamburger {
    display: none;
    cursor: pointer;
  }

  .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: all 0.3s ease;
    background-color: white;
  }

  .hamburger {
    display: block;
  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-menu {
    position: fixed;
    left: -100%;
    gap: 0;
    flex-direction: column;
    background-color: #262626;
    width: 100%;
    text-align: center;
    transition: 0.3s;
    
  }

  .nav-link {
    margin:0;
    padding: 0;
  }

  ul.nav-menu.active {
    left: 0;
    
    

  
  }


footer {
  display: flex;
  flex-direction: row;
}

.box-1,
.box-2,
.box-3,
.box-4 {
  width: 25%;
}
}
15

Here is the revised code:

@media screen and (min-width: 769px) and (max-width: 1279px) {

  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  header {
    background-color: #262626;
  }

  li {
    list-style: none;
  }

  a {
    color: white;
    text-decoration: none;
  }

  .container {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }

  .navbar {
    min-height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .nav-branding {
    align-items: center;
    font-size: 2rem;
    z-index: 2;
  }

  .nav-link {
    transition: 0.3s ease-out;
    padding: 0;
  }

  .nav-item {
    position: relative;
    margin: 5px 5px;
  }

  li.nav-item {
    margin: 0;
  }

  .nav-menu .nav-menu {
    position: absolute;
    top: -100%;
    left: 0;
    display: block;
    white-space: nowrap;
    transition: 1s ease;
    pointer-events: none;
    opacity: 0;
  }

  .nav-item:hover .nav-menu {
    top: 100%;
    opacity: 1;
    pointer-events: initial;
  }

  .dropdown {
    opacity: 0;
    position: relative;
    top: 0;
    height: 0;
    transform: translateY(-100%);
    overflow: hidden;
    left: 0;
    transition: 0.5s ease;
    pointer-events: none;
    white-space: nowrap;
    /* padding: 10px 0; */
  }

  .nav-item:hover > ul.dropdown {
    top: 0;
    height: auto;
    pointer-events: initial;
    opacity: 1;
    background: #262626;
    transform: translateY(0);
  }

  .nav-link:hover {
    color: dodgerblue;
  }

  .hamburger {
    display: none;
    cursor: pointer;
  }

  .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: all 0.3s ease;
    background-color: white;
  }

  .hamburger {
    display: block;
  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-menu {
    position: fixed;
    left: -100%;
    top: 0;
    gap: 0;
    flex-direction: column;
    background-color: #262626;
    width: 100%;
    text-align: center;
    transition: 0.3s;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .nav-link {
    margin: 0;
    padding: 0;
  }

  ul.nav-menu.active {
    left: 0;
  }

  footer {
    display: flex;
    flex-direction: row;
  }

  .box-1,
  .box-2,
  .box-3,
  .box-4 {
    width: 25%;
  }
}

Things to note!

As the menu is now in the flow it can’t be animated like before because it has to be hidden by using a zero height and then changing to auto height when revealed. In Css you cannot animate to auto. You can animate other things such as the opacity but not the height, There are other methods but I don’t want to go there if its not necessary.

I assume you are toggling the left-100% value with JS as I could see no classes in the CSS. You would be better getting js to simplay add and remove a css class (such as open) and then use that class in the css to move the menu into view. Its best to separate the behaviour of js and not start styling things directly through js unless its some sort of continuous dynamic effect.

When you use absolute or fixed positioning you need to specify the top and left co-ordinates at least otherwise it just becomes absolute at the point it occupies in the document which may not be the top as in your fixed menu example.

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.