# Problem with dropdown menu in CSS

**URL:** <https://forum.freecodecamp.org/t/problem-with-dropdown-menu-in-css/471363>\
**Category:** Curriculum Help\
**Tags:** html, css\
**Created:** [July 28, 2021, 11:37pm UTC](https://forum.freecodecamp.org/t/problem-with-dropdown-menu-in-css/471363 "2021-07-28T23:37:54Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![AnnaxT](https://avatars.discourse-cdn.com/v4/letter/a/77aa72/32.png) [@AnnaxT](https://forum.freecodecamp.org/u/AnnaxT)\
**Post date:** [July 28, 2021, 11:37pm UTC](https://forum.freecodecamp.org/t/problem-with-dropdown-menu-in-css/471363/1 "2021-07-28T23:37:54Z")

</div>

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](https://annaxt.github.io/product_landing_page/plant_store.html)

HTML:

```auto
<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:

```auto
/* 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

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [July 28, 2021, 11:58pm UTC](https://forum.freecodecamp.org/t/problem-with-dropdown-menu-in-css/471363/2 "2021-07-28T23:58:08Z")

</div>

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`.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [January 27, 2022, 11:59am UTC](https://forum.freecodecamp.org/t/problem-with-dropdown-menu-in-css/471363/3 "2022-01-27T11:59:02Z")

</div>

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