Make all <li> same width as the widest

Asked 11/1, 2012 at 17:57 Answered 25/3, 2017 at 8:23

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.

Wordsmith answered 11/1, 2012 at 17:57 Comment(1)

If you're only looking to support as low as IE8, you should look into display:table- – Mosora 11/1, 2012 at 18:1

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>

Nadabb answered 11/1, 2012 at 18:5 Comment(0)

li {display:block} will make the list items as wide as the widest item in that parent container

Partiality answered 11/1, 2012 at 18:3 Comment(1)

Doesnt seem to work for me? Here is an example forevertan.dk/_temp/eventfest/3/test2.htm – Wordsmith 11/1, 2012 at 18:38

body {
  background: #ededed;
  margin: 0 auto;
}

.wrapper {
  width: 720px;
  border: 1px solid red;
  padding: 5px;
}

.menu {
  padding: 0;
  margin: 0;
  width: 100%;
  border-bottom: 0;
}

.menu li {
  display: table-cell;
  width: 1%;
  float: none;
  border: 1px solid green;
  margin: 2px;
  padding: 10px;
  text-align: center;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <div class="wrapper">
      <ul class="menu">
        <li><a href="#">menu 1</a></li>
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 3</a></li>
        <li><a href="#">menu 4</a></li>
        <li><a href="#">menu 5</a></li>
      </ul>
    </div>
  </body>
</html>

Mollee answered 25/3, 2017 at 8:23 Comment(0)

Recommended topics

Hot tags