skip to Main Content

Good day,
I am trying to create a dropdown menu on my freshly new website but cannot find the reason as to why it does not appear.
It should appear under "About" but when I click on it nothing appears!
Could someone help me?

Maybe the problem has a link with the display:none// display:block?

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

body {
  background-color: #101010;
  background-size: cover;
  background-position: center;
  font-family: sans-serif;
}

.header {
  width: 100%;
  height: 200px;
  display: block;
  background-color: #101010;
}

.inner_header {
  width: 1000px;
  height: 100%;
  display: block;
  margin: 0 auto;
  background-color: red;
}

.logo_container {
  height: 100%;
  display: table;
  float: right;
  position: relative;
  right: 40%;
}

.logo_container h1 {
  color: bisque;
  font-family: "Whisper", cursive;
  font-weight: 400;
  font-style: normal;
}

.menu_navbar {
  background: blue;
  text-align: center;
}

.menu_navbar ul {
  display: inline-flex;
  list-style: none;
  color: bisque;
  text-align: center;
}

.menu_navbar ul li {
  width: 120px;
  margin: 15px;
  padding: 15px;
}

.menu_navbar ul li a {
  text-decoration: none;
  color: bisque;
}

.active,
.menu_navbar ul li:hover {
  background: transparent;
}

.sub_menu_navbar_1 {
  display: none;
}

.menu_navbar ul li:hover .sub_menu_navbar_1 {
  display: block;
  position: absolute;
  background: blue;
  margin-top: 15px;
  margin-left: -15px;
}

.menu_navbar ul li:hover .sub_menu_navbar_1 ul {
  display: block;
  margin: 10px;
}
<header>
  <div class="header">
    <div class="inner_header">
      <div class="logo_container">
        <h1>Céramique & Porcelaine</h1>
      </div>
    </div>
  </div>
</header>

<div class="menu_navbar">
  <ul>
    <li><a class="active" href="#">Home</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">About</a></li>
    <div class="sub_menu_navbar_1">
      <ul>
        <li><a href="#">The Shop</a></li>
        <li><a href="#">The Artist</a></li>
      </ul>
    </div>
    <li><a href="#">Contact</a></li>

  </ul>
</div>

Thank you in advance!

2

Answers


  1. The problem is here,

    .menu_navbar ul li:hover .sub_menu_navbar_1 ul{
        display: block;
        margin: 10px;
        
    }
    

    According to your styling rule to trigger the hover effect on the sub_menu_navbar the element needs to inside li element. Like below,

          <li>
            <a href="#">About</a>
            <div class="sub_menu_navbar_1">
              <ul>
                <li><a href="#">The Shop</a></li>
                <li><a href="#">The Artist</a></li>
              </ul>
            </div>
          </li>
    

    I hope this helps.

    Login or Signup to reply.
  2. The dropdown menu should be nested within the li element that triggers it, but in your code, the .sub_menu_navbar_1 is placed outside of any li element. This can cause the CSS hover selector to not work as intended.

    The position: relative; on the li ensures that the absolutely positioned .sub_menu_navbar_1 is placed relative to the li itself, not the entire page or another parent element.

    * {
      margin: 0;
      padding: 0;
      list-style: none;
      text-decoration: none;
      box-sizing: border-box;
    }
    
    body {
      background-color: #101010;
      background-size: cover;
      background-position: center;
      font-family: sans-serif;
    }
    
    .header {
      width: 100%;
      height: 200px;
      display: block;
      background-color: #101010;
    }
    
    .inner_header {
      width: 1000px;
      height: 100%;
      display: block;
      margin: 0 auto;
      background-color: red;
    }
    
    .logo_container {
      height: 100%;
      display: table;
      float: right;
      position: relative;
      right: 40%;
    }
    
    .logo_container h1 {
      color: bisque;
      font-family: "Whisper", cursive;
      font-weight: 400;
      font-style: normal;
    }
    
    .menu_navbar {
      background: blue;
      text-align: center;
    }
    
    .menu_navbar ul {
      display: inline-flex;
      list-style: none;
      color: bisque;
      text-align: center;
    }
    
    .menu_navbar ul li {
      position: relative;
      width: 120px;
      margin: 15px;
      padding: 15px;
    }
    
    .menu_navbar ul li a {
      text-decoration: none;
      color: bisque;
    }
    
    .active,
    .menu_navbar ul li:hover {
      background: transparent;
    }
    
    .sub_menu_navbar_1 {
      display: none;
    }
    
    .menu_navbar ul li:hover .sub_menu_navbar_1 {
      display: block;
      position: absolute;
      background: blue;
      margin-top: 15px;
      margin-left: -15px;
    }
    
    .menu_navbar ul li:hover .sub_menu_navbar_1 ul {
      display: block;
      margin: 10px;
    }
    .sub_menu_navbar_1 {
      display: none;
      position: absolute; 
      background: blue;
      margin-top: 15px;
      left: 0; 
    }
    <header>
      <div class="header">
        <div class="inner_header">
          <div class="logo_container">
            <h1>Céramique & Porcelaine</h1>
          </div>
        </div>
      </div>
    </header>
    
    <div class="menu_navbar">
      <ul>
        <li><a class="active" href="#">Home</a></li>
        <li><a href="#">Gallery</a></li>
        <li>
          <a href="#">About</a>
          <div class="sub_menu_navbar_1">
          <ul>
            <li><a href="#">The Shop</a></li>
            <li><a href="#">The Artist</a></li>
          </ul>
          </div>
        </li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search