Dropdown Menu CSS

Dropdown menu using html and css hides behind the h1?

It's because you forgot to set the dropdown backgroundcolor:

.drop-down__button:hover + .drop-down__list {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
  background-color: white;
}

By making this adjustment it should work as expected.

css dropdown menu inside unordered list (ul)

You can do something like this:

Source

  #nav {

  list-style: none inside;

  margin: 0;

  padding: 0;

  text-align: center;

}

#nav li {

  display: block;

  position: relative;

  float: left;

  background: #24af15;

  /* menu background color */

}

#nav li a {

  display: block;

  padding: 0;

  text-decoration: none;

  width: 200px;

  /* this is the width of the menu items */

  line-height: 35px;

  /* this is the hieght of the menu items */

  color: #ffffff;

  /* list item font color */

}

#nav li li a {

  font-size: 80%;

}

/* smaller font size for sub menu items */

#nav li:hover {

  background: #003f20;

}

/* highlights current hovered list item and the parent list items when hovering over sub menues */

#nav ul {

  position: absolute;

  padding: 0;

  left: 0;

  display: none;

  /* hides sublists */

}

#nav li:hover ul ul {

  display: none;

}

/* hides sub-sublists */

#nav li:hover ul {

  display: block;

}

/* shows sublist on hover */

#nav li li:hover ul {

  display: block;

  /* shows sub-sublist on hover */

  margin-left: 200px;

  /* this should be the same width as the parent list item */

  margin-top: -35px;

  /* aligns top of sub menu with top of list item */

<ul id="nav">

  <li><a href="#">Home</a></li>

  <li><a href="#">Services</a>

    <ul>

      <li><a href="#">Services-1</a></li>

      <li><a href="#">Services-2</a></li>

      <li><a href="#">SUB Services »</a>

        <ul>

          <li><a href="#">Sub Services 1</a>

            <li><a href="#">Sub Services 2</a>

        </ul>

        </li>

    </ul>

    </li>

    <li><a href="#">About</a></li>

</ul>

How to align the dropdown menu with the button

You can create a container div to put both the menu and the button themselves into and then give that container absolute positioning properties like you're doing with your menu. You'll have to adjust your menu position so when it appears it's not overlapping the button but I took care of that in the code. Also, you'll need to modify the position on the menu itself if you want the button and the menu to be on the absolute right and not offset and overflowing the right side of the screen.

See: https://developer.mozilla.org/pt-BR/docs/Web/CSS/position

function myFunction() {
  var x = document.getElementById("Demo");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else {
    x.className += " w3-hide";
    setTimeout(function() {
      x.className = x.className.replace(" w3-show", "");
      x.className = x.className.replace(" w3-hide", "");

    }, 500)
  }
}

.container {
  display: block;
  margin: 0 0;
  position: absolute;
  top: 10px;
  right: 0px;
}

/*Items menu*/
.user_menu_item {
  display: flex;
  align-items: center;
}

.user_menu_item:hover {
  background: whitesmoke;
  border-left: 4px solid blue;
  transition: 0.3s;
}

.user_menu_item:not(:hover) {
  transition: 0.3s;
}

.user_menu_item>a {
  display: flex;
  align-items: center;
  padding: 12px 10px 12px 10px;
  width: 100%;
  font-size: 14px;
  color: #75777D;
}

.w3-container {
  position: absolute;
  top: 25px;
  right: 0px;
}

.w3-dropdown-click {
  display: flex;
  position: relative;
}

.w3-dropdown-content {
  display: none;
  background-color: whitesmoke;
  min-width: 160px;
  overflow: hidden;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  position: relative;

  animation: animateFromBottom 0.6s
}

@keyframes animateFromBottom {
  from {
    bottom: -50px;
    opacity: 0
  }

  to {
    bottom: 0;
    opacity: 1
  }
}

@keyframes animateToBottom {
  from {
    bottom: 0;
    opacity: 1
  }

  to {
    bottom: -50px;
    opacity: 0
  }
}

.w3-bar-block .w3-bar-item {
  width: 100%;
  display: block;
  padding: 8px 16px;
  text-align: left;
  border: none;
  white-space: normal;
  float: none;
  outline: 0;
}

.w3-show-block,
.w3-show {
  display: block !important
}

.w3-dropdown-content.w3-hide {
  animation: animateToBottom 0.6s
}

.w3-button {
  display: block;
}

<div class="container">
  <button onclick="myFunction()" class="w3-button">Click Me!</button>

  <div class="w3-container">
    <div class="w3-dropdown-click">

      <div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
        <div class="user_menu_item">
          <a href="/account">
            <span class="link_text">Dashboard</span>
          </a>
        </div>

        <div class="user_menu_item">
          <a href="ordini">
            <span class="link_text">I miei ordini</span>
          </a>
        </div>

        <div class="user_menu_item">
          <a href="libreria">
            <span class="link_text">Downloads</span>
          </a>
        </div>

        <div class="user_menu_item">
          <a href="impostazioni">
            <span class="link_text">Impostazioni</span>
          </a>
        </div>

        <div class="user_menu_item">
          <a href="wp-login.php?action=logout">
            <span class="link_text">Logout</span>
          </a>
        </div>
      </div>

    </div>
  </div>
</div>

---

Related Topics