Make All
Same Width As The Widest

Question

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:

Solution 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;
}

.menuli {
  width: 100%
}

#navMain {}

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

#navMainulli {
  margin-right: 5px;
  text-align: center;
}

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

#navMainlia:hover {
  background-color: black;
}

#navMainulli:last-child {
  margin-right: 0px;
}

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

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

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

#navMainulliulli:first-child {
  padding-top: 5px;
}

#navMainulli:hoverul {
  visibility: visible;
}

<html><head></head><body><divid="navMain"><ul><li><ahref="#nogo">Forside</a><ulclass="menu"><li><ahref="#nogo">1111111111111</a></li><li><ahref="#nogo">Link 1-2</a></li><li><ahref="#nogo">Link 1-3</a></li><li><ahref="#nogo">Link 1-3</a></li><li><ahref="#nogo">Link 1-3</a></li><li><ahref="#nogo">Link 1-3</a></li></ul></li><li><ahref="#nogo">Om Os</a><ulclass="menu"><li><ahref="#nogo">Link 2-1</a></li><li><ahref="#nogo">Link 2-2</a></li><li><ahref="#nogo">Link 2-3</a></li></ul></li><li><ahref="#nogo">Link 3</a><ulclass="menu"><li><ahref="#nogo">Link 3-1</a></li><li><ahref="#nogo">Link 3-2</a></li><li><ahref="#nogo">Link 3-3</a></li></ul></li></ul></div></body></html>

Solution 2:

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

Solution 3:

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;
}

.menuli {
  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><divclass="wrapper"><ulclass="menu"><li><ahref="#">menu 1</a></li><li><ahref="#">menu 2</a></li><li><ahref="#">menu 3</a></li><li><ahref="#">menu 4</a></li><li><ahref="#">menu 5</a></li></ul></div></body></html>

Build Html5

Make All
Same Width As The Widest

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Make All
Same Width As The Widest"

Make All Same Width As The Widest

Solution 1:

Solution 2:

Solution 3: