Сделайте все <li>такой же ширины, как самые широкие - PullRequest
Новая
       28

Сделайте все <li>такой же ширины, как самые широкие

4 голосов
/ 11 января 2012

У меня есть это меню, которое настроено и имеет выпадающие списки.
Внутренний ul имеет фон.
Каждый выпадающий список li имеет :hover, который меняет фон 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>

Проблема в том, что когда одно из подменю li длиннее других, оно будет расширяться только само, а не другое li хода.
В результате эффект :hover имеет разную длину.

Так как бы я сделал все li в каждом внутреннем ul того же размера, что и самый широкий?

Здесь вы можете найти CSS , если необходимо.

Ответы [ 3 ]

6 голосов
/ 11 января 2012

Здесь. Обратите внимание, что я добавил класс в ваше меню li и добавил фон тела к вашему css, потому что не мог заметить ваши меню. Наконец трюк делается, делая элементы li 100% width 

<html>
<head>
<style>
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;
}
</style>
</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>
2 голосов
/ 11 января 2012

li {display:block} сделает элементы списка такими же широкими, как самый широкий элемент в этом родительском контейнере

0 голосов
/ 25 марта 2017 
<!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>
...