Dropdown items overflowing container

Question

I'm fairly new to html and css and I'm trying to make a website on neocities for a personal project. I'm working on the navbar and the dropdown links keep overflowing the background container, making it look really messy. How can I make the background container for the dropdown menu adjust to fit the width of the dropdown items?

Link to site: https://thenerdybirdy.neocities.org/test

[Image showcasing the problem]

https://imgur.com/eiEEfrF

CSS & HTML code:

/* navigation section!! */
#navbar {
  height: 40px;
  background-color: #13092D;
  /* navbar color */
  width: 100%;
}

#navbar ul {
  display: flex;
  padding: 5px;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
  align-items: center;
}

#navbar li ul {
  position: absolute;
  display: flex;
  left: 0;
  top: 100%;
  width: 100%;
}

#navbar li {
  padding-top: 8px;
}

/* navigation links*/
#navbar li a {
  color: #ED64F5;
  /* navbar text color */
  font-weight: 800;
  text-decoration: none;
  /* this removes the underline */
  }

/* navigation link when a link is hovered over */
#navbar li a:hover {
  color: #a49cba;
  text-decoration: underline;
}

#navbar ul li {
  list-style: none;
  padding: 5px;
  position: relative;
  display: block;
}

#navbar ul li a {
  color: #ED64F5;
  text-decoration: none;
  padding: 5px 10px;
}

#navbar ul li a:hover
{
  background: #13092D;
  text-decoration: none;
}

#navbar ul li ul {
  display: none;
  background: #241445;
}

#navbar ul li:hover ul {
  display: block;
  position: absolute;
  margin-top: 5px;
  background: #241445;
  padding: 10px 2px;
}

#flex {
  display: flex;
}

<div id="container">
            <div id="headerArea">
                <div id="header"></div>
                <nav id="navbar">
                    <ul>
                        <li><a href="https://thenerdybirdy.neocities.org/">Home</a></li>
                        <li><a href="https://thenerdybirdy.neocities.org/cheskel.html">Cheskel</a>
                          <ul class="drop-menu">
                                <li><a href="https://thenerdybirdy.neocities.org/cheskel.html">Language</a></li>
                                <li><a href="#">Culture</a></li>
                                <li><a href="#">Individuals</a></li>
                            </ul>
                        </li>
                        <li><a href="https://thenerdybirdy.neocities.org/sunit/sapients.html">Iu</a>
                          <ul class="drop-menu">
                                <li><a href="#">Language</a></li>
                                <li><a href="#">Culture</a></li>
                                <li><a href="#">Individuals</a></li>
                            </ul>
                        </li>
                        <li><a href="https://thenerdybirdy.neocities.org/sunit/sapients.html">Visir</a>
                          <ul class="drop-menu">
                                <li><a href="#">Language</a></li>
                                <li><a href="#">Culture</a></li>
                                <li><a href="#">Individuals</a></li>
                            </ul>
                        </li>
                        <li><a href="https://thenerdybirdy.neocities.org/sunit">Sunit</a>
                        </li>
                        <li><a href="#">Flora/Fauna</a>
                          <ul class="drop-menu">
                                <li><a href="#">Crystal</a></li>
                                <li><a href="#">Fauna</a></li>
                                <li><a href="#">Flora</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Locations</a>
                          <ul class="drop-menu">
                                <li><a href="#">Glass Desert</a></li>
                                <li><a href="#">Wish Peak</a></li>
                            </ul>
                        <li><a href="#">Extras</a>
                        </li>
                        <li><a href="#">Fan Creations</a>
                        </li>
                    </ul>
                </nav>
            </div>

Try adding width: fit-content; to your drop-menu class

Daniel Black
– Daniel Black

2025-03-21 19:31:31 +00:00
Commented Mar 21 at 19:31 — Daniel Black
– Daniel Black, Commented Mar 21 at 19:31

Ori Drori · Accepted Answer · 2025-03-21 20:28:31Z

You've set the width of all ul descendent items of#navbar li to width: 100%. Removing it fixes the problem.

#navbar li ul {
  position: absolute;
  display: flex;
  left: 0;
  top: 100%;
  /** remove this - width: 100%; **/
}

Note that a items with multiple words, might wrap to multiple lines. To prevent that, you can assign white-space: nowrap; to the a:

#navbar ul li a {
  color: #ED64F5;
  text-decoration: none;
  padding: 5px 10px;
  white-space: nowrap; /* this will prevent long text from wrapping */
}

/* navigation section!! */
#navbar {
  height: 40px;
  background-color: #13092D;
  /* navbar color */
  width: 100%;
}

#navbar ul {
  display: flex;
  padding: 5px;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
  align-items: center;
}

#navbar li ul {
  position: absolute;
  display: flex;
  left: 0;
  top: 100%;
}

#navbar li {
  padding-top: 8px;
}

/* navigation links*/
#navbar li a {
  color: #ED64F5;
  /* navbar text color */
  font-weight: 800;
  text-decoration: none;
  /* this removes the underline */
  }

/* navigation link when a link is hovered over */
#navbar li a:hover {
  color: #a49cba;
  text-decoration: underline;
}

#navbar ul li {
  list-style: none;
  padding: 5px;
  position: relative;
  display: block;
}

#navbar ul li a {
  color: #ED64F5;
  text-decoration: none;
  padding: 5px 10px;
  white-space: nowrap; /* this will prevent long text from wrapping */
}

#navbar ul li a:hover
{
  background: #13092D;
  text-decoration: none;
}

#navbar ul li ul {
  display: none;
  background: #241445;
}

#navbar ul li:hover ul {
  display: block;
  position: absolute;
  margin-top: 5px;
  background: #241445;
  padding: 10px 2px;
}

#flex {
  display: flex;
}

<div id="container">
            <div id="headerArea">
                <div id="header"></div>
                <nav id="navbar">
                    <ul>
                        <li><a href="https://thenerdybirdy.neocities.org/">Home</a></li>
                        <li><a href="https://thenerdybirdy.neocities.org/cheskel.html">Cheskel</a>
                          <ul class="drop-menu">
                                <li><a href="https://thenerdybirdy.neocities.org/cheskel.html">Language</a></li>
                                <li><a href="#">Culture</a></li>
                                <li><a href="#">Individuals</a></li>
                            </ul>
                        </li>
                        <li><a href="https://thenerdybirdy.neocities.org/sunit/sapients.html">Iu</a>
                          <ul class="drop-menu">
                                <li><a href="#">Language</a></li>
                                <li><a href="#">Culture</a></li>
                                <li><a href="#">Individuals</a></li>
                            </ul>
                        </li>
                        <li><a href="https://thenerdybirdy.neocities.org/sunit/sapients.html">Visir</a>
                          <ul class="drop-menu">
                                <li><a href="#">Language</a></li>
                                <li><a href="#">Culture</a></li>
                                <li><a href="#">Individuals</a></li>
                            </ul>
                        </li>
                        <li><a href="https://thenerdybirdy.neocities.org/sunit">Sunit</a>
                        </li>
                        <li><a href="#">Flora/Fauna</a>
                          <ul class="drop-menu">
                                <li><a href="#">Crystal</a></li>
                                <li><a href="#">Fauna</a></li>
                                <li><a href="#">Flora</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Locations</a>
                          <ul class="drop-menu">
                                <li><a href="#">Glass Desert</a></li>
                                <li><a href="#">Wish Peak</a></li>
                            </ul>
                        <li><a href="#">Extras</a>
                        </li>
                        <li><a href="#">Fan Creations</a>
                        </li>
                    </ul>
                </nav>
            </div>

Frox · Accepted Answer · 2025-03-21 19:40:25Z

You are looking for width: fit-content; on your #navbar ul li ul selector.

Please read the docs.

/* navigation section!! */
#navbar {
  height: 40px;
  background-color: #13092D;
  /* navbar color */
  width: 100%;
}

#navbar ul {
  display: flex;
  padding: 5px;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
  align-items: center;
}

#navbar li ul {
  position: absolute;
  display: flex;
  left: 0;
  top: 100%;
  width: 100%;
}

#navbar li {
  padding-top: 8px;
}

/* navigation links*/
#navbar li a {
  color: #ED64F5;
  /* navbar text color */
  font-weight: 800;
  text-decoration: none;
  /* this removes the underline */
  }

/* navigation link when a link is hovered over */
#navbar li a:hover {
  color: #a49cba;
  text-decoration: underline;
}

#navbar ul li {
  list-style: none;
  padding: 5px;
  position: relative;
  display: block;
}

#navbar ul li a {
  color: #ED64F5;
  text-decoration: none;
  padding: 5px 10px;
}

#navbar ul li a:hover
{
  background: #13092D;
  text-decoration: none;
}

#navbar ul li ul {
  display: none;
  background: #241445;
  width: fit-content;
}

#navbar ul li:hover ul {
  display: block;
  position: absolute;
  margin-top: 5px;
  background: #241445;
  padding: 10px 2px;
}

#flex {
  display: flex;
}

<div id="container">
            <div id="headerArea">
                <div id="header"></div>
                <nav id="navbar">
                    <ul>
                        <li><a href="https://thenerdybirdy.neocities.org/">Home</a></li>
                        <li><a href="https://thenerdybirdy.neocities.org/cheskel.html">Cheskel</a>
                          <ul class="drop-menu">
                                <li><a href="https://thenerdybirdy.neocities.org/cheskel.html">Language</a></li>
                                <li><a href="#">Culture</a></li>
                                <li><a href="#">Individuals</a></li>
                            </ul>
                        </li>
                        <li><a href="https://thenerdybirdy.neocities.org/sunit/sapients.html">Iu</a>
                          <ul class="drop-menu">
                                <li><a href="#">Language</a></li>
                                <li><a href="#">Culture</a></li>
                                <li><a href="#">Individuals</a></li>
                            </ul>
                        </li>
                        <li><a href="https://thenerdybirdy.neocities.org/sunit/sapients.html">Visir</a>
                          <ul class="drop-menu">
                                <li><a href="#">Language</a></li>
                                <li><a href="#">Culture</a></li>
                                <li><a href="#">Individuals</a></li>
                            </ul>
                        </li>
                        <li><a href="https://thenerdybirdy.neocities.org/sunit">Sunit</a>
                        </li>
                        <li><a href="#">Flora/Fauna</a>
                          <ul class="drop-menu">
                                <li><a href="#">Crystal</a></li>
                                <li><a href="#">Fauna</a></li>
                                <li><a href="#">Flora</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Locations</a>
                          <ul class="drop-menu">
                                <li><a href="#">Glass Desert</a></li>
                                <li><a href="#">Wish Peak</a></li>
                            </ul>
                        <li><a href="#">Extras</a>
                        </li>
                        <li><a href="#">Fan Creations</a>
                        </li>
                    </ul>
                </nav>
            </div>

I just tried this to no avail :( the issue still persists even with width: fit-content; added to #navbar ul li ul

Collectives™ on Stack Overflow

Dropdown items overflowing container

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related