HTML/CSS

Горизонтальное меню на всю ширину блока

Часто приходится делать меню на всю ширину какого-либо блока или окна. При этом оно должно:

  • Растягиваться на всю ширину блока;
  • При добавлении новых пунктов, должно вписываться в ширину блока-родителя;

Пример:

HTML

<div class="menu">
    <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">О компании</a></li>
        <li><a href="#">Покупателям</a></li>
        <li><a href="#">Акции</a></li>
        <li><a href="#">Новости</a></li>
        <li><a href="#">Контакты</a></li>
    </ul>
</div>

CSS

.menu {
    width: 100%;
    display: table;
    border-radius: 2px;
}
    .menu ul {
        display: table-row;
    }
    .menu li {
        display: table-cell;
        float: none;
        background: #2767A0;
    }
    .menu ul li:hover, .menu a:hover {
        background: #666;
    }
    .menu li a {
        display: block;
        padding: 8px 15px;
        color: #fff;
        text-align: center;
    }

Выпадающие меню

HTML

<div class="menu">
    <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">О компании</a></li>
        <li><a href="#">Покупателям</a></li>
        <li>
            <a href="#">Акции</a>
            <ul>
                <li><a href="#">Акция 1</a></li>
                <li><a href="#">Акция 2</a></li>
                <li><a href="#">Акция 3</a></li>
                <li><a href="#">Акция 4</a></li>
                <li><a href="#">Акция 5</a></li>
            </ul>
        </li>
        <li><a href="#">Новости</a></li>
        <li><a href="#">Контакты</a></li>
    </ul>
</div>

CSS

.menu {
    width: 100%;
    display: table;
    border-radius: 2px;
}
    .menu ul {
        display: table-row;
    }
    .menu li {
        display: table-cell;
        float: none;
        position: relative;
        background: #2767A0;
    }
    .menu li a {
        display: block;
        padding: 8px 15px;
        color: #fff;
        text-align: center;
    }
    .menu ul li:hover, .menu a:hover {
        background: #666;
    }
        .menu ul ul  {
            display: none;
        }
        .menu li:hover ul  {
            display: block;
            position: absolute;
            top: 36px;
            left: 0px;
            background: #666;
            margin: 0;
            padding: 10px 20px;
            width: 150px;
            z-index: 9999;
        }
        .menu ul ul li  {
            display: block;
            background: #666;
        }
        .menu ul ul li a  {
            display: block;
            padding: 0;
            background: #666;
            text-align: left;
        }
01 ноября 2016