Problem with dropdown menu in CSS

[AnnaxT]

Hi guys,

I’m working on a website for my portfolio and I’m trying to create a dropdown menu in the navigation bar that would appear when users hover over it.

I was able to create it this way but when I apply the width 100vw to it, it doesn’t cover the entire page width. I assume that it has something to do with positioning but I’ve been looking at it the whole evening and cannot make it work.

Would anyone be able to help me with this? Would it be possible to make it cover the entire width somehow? I’m attaching the link below so you can see what I mean.

https://annaxt.github.io/product_landing_page/plant_store.html

HTML:

<nav id="nav-bar">
      <div class="dropdown">
        <a class="nav-link">Plants</a>
        <div class="dropdown-content">
          <a href="#">Indoor Plants</a>
          <a href="#">Outdoor Plants</a>
          <a href="#">Easy care sets</a>
        </div>
      </div>
        <div class="dropdown">
          <a class="nav-link">Pots</a>
        <div class="dropdown-content">
          <a href="#">Indoor Pots</a>
          <a href="#">Ourdoor Pots</a>
          <a href="#">New In</a>
        </div>
      </div>
          <a class="nav-link" href="#about-us">About us</a>
    </nav>

CSS:

/* Dropdwon menu*/
.dropdown {
  position: relative;
  display: inline-block;
}
/* dropdown content - hidden by default */
.dropdown-content {
  padding-top: 1.75rem;
  visibility: hidden;
  background-color: white;
  position: absolute;
  width: 100vw;
  z-index: 1;
  opacity: 0;
}
.dropdown:hover .dropdown-content{
visibility: visible;
opacity: 1;
transition: 0.75s ease-out;
}
.dropdown-content a:hover {
  color: var(--green-button);
}

This posts seems very long but if someone could help me I would really appreciate it!

Thank you!
Anna

[lasjorg]

Add left: 0 to .dropdown-content and remove position: relative from .dropdown.

The menu will cover up the logo a bit so you can either move its top offset or use z-index: -1.