Home/ Questions/Q 7050693
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T03:10:27+00:00

I’ve got this menu wich is setup inline and has dropdowns. The inner ul

  • 0

I’ve got this menu wich is setup inline and has dropdowns.
The inner ul has a background.
Each dropdown li has a :hover that changes the background of the li:

<div id="navMain">
    <ul>
        <li><a href="#nogo">Forside</a>
            <ul>
                <li><a href="#nogo">1111111111111</a></li>
                <li><a href="#nogo">Link 1-2</a></li>
                <!-- etc. -->
            </ul>
        </li>
        <li><a href="#nogo">Om Os</a>
            <ul>
                <li><a href="#nogo">Link 2-1</a></li>
                <li><a href="#nogo">Link 2-2</a></li>
                <!-- etc. -->
            </ul>
        </li>
        <li><a href="#nogo">Link 3</a>
            <ul>
                <li><a href="#nogo">Link 3-1</a></li>
                <li><a href="#nogo">Link 3-2</a></li>
                <!-- etc. -->
            </ul>
        </li>
    </ul>
</div>

Problem is, that when one of the submenu li is longer than the others, it will only expand itself, and not the other li ofcourse.
This results in the :hover effect having different lengths.

So how would i make all li in each inner ul the same size as the widest one?

Here you can find the CSS if needed.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here. Notice I added a class to your menu li‘s and that I added a body background to your css, because I couldn’t notice your menus. Finally the trick is done by making the li elements 100% width

    body {
  background-color: green;
}

.menu li {
  width: 100%
}

#navMain {}

#navMain ul {
  padding: 0;
  margin: 0;
  z-index: 2;
}

#navMain ul li {
  margin-right: 5px;
  text-align: center;
}

#navMain li a {
  display: block;
  text-decoration: none;
  color: white;
  padding-left: 10px;
  padding-right: 10px;
}

#navMain li a:hover {
  background-color: black;
}

#navMain ul li:last-child {
  margin-right: 0px;
}

#navMain li {
  position: relative;
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 17px;
  font-weight: bold;
  color: #fff;
}

#navMain ul ul {
  position: absolute;
  top: 20px;
  visibility: hidden;
  background-image: url(img/alphaBg.png);
}

#navMain ul li ul li {
  font-size: 12px;
  margin-right: 0px;
  text-align: left;
}

#navMain ul li ul li:first-child {
  padding-top: 5px;
}

#navMain ul li:hover ul {
  visibility: visible;
}
    <html>

<head>
</head>

<body>
  <div id="navMain">
    <ul>
      <li><a href="#nogo">Forside</a>
        <ul class="menu">
          <li><a href="#nogo">1111111111111</a></li>
          <li><a href="#nogo">Link 1-2</a></li>
          <li><a href="#nogo">Link 1-3</a></li>
          <li><a href="#nogo">Link 1-3</a></li>
          <li><a href="#nogo">Link 1-3</a></li>
          <li><a href="#nogo">Link 1-3</a></li>
        </ul>
      </li>
      <li><a href="#nogo">Om Os</a>
        <ul class="menu">
          <li><a href="#nogo">Link 2-1</a></li>
          <li><a href="#nogo">Link 2-2</a></li>
          <li><a href="#nogo">Link 2-3</a></li>
        </ul>
      </li>
      <li><a href="#nogo">Link 3</a>
        <ul class="menu">
          <li><a href="#nogo">Link 3-1</a></li>
          <li><a href="#nogo">Link 3-2</a></li>
          <li><a href="#nogo">Link 3-3</a></li>
        </ul>
      </li>
    </ul>
  </div>
</body>

</html>
    • 0