All geek questions in one place

Make all <li> the same width as the widest

I have this menu that is customizable in a line and has drop down lists.
The inner ul has a background.
Each li drop-down menu has :hover , which changes the background of 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>

The problem is that when one of the li submenus is longer than the others, it will only expand, not the other li of the course.
This leads to the effect :hover , which has a different length.

So, how would I do all li in each inner ul the same size as the widest?

Here you can find CSS if necessary.

+6
source share
3 answers

Here. Note that I added a class to your li menu and added a body background for your CSS, because I could not notice your menus. Finally, the trick is done by making li elements 100% wide

 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>

+8
source

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

+3
source 
 <!DOCTYPE html> <html> <head> <title>Page Title</title> <style> 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; } </style> </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>
0
source

Source: https://habr.com/ru/post/1390495/

More articles:


All Articles