Как сделать подменю на всю ширину контейнера?

Question

[yoyoyooyoyoyoyoyoyoyoyoyo]

Добрый день. Подскажите, пожалуйста, как сделать горизонтальное подменю на всю ширину контейнера ?

Пробовал решить эту задачу через

.dropdown-menu {
	width: 100%;
	max-width: 1140px;
text-align: center;
left: 0%;
right: 0%;
top: auto;
position: fixed;
margin: 0 auto;
}

Выглядит так. как надо, но из-за фикседа меню страдает, если находится слегка прокрученным.

В подменю будет 4-5 столбцов.

Я так понимаю, что работать надо с этой частью кода, но уже все перепробовал...

<div class="dropdown-menu">
            <div class="dropdown-inner">
              <?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>
              <ul class="list-unstyled">
                <?php foreach ($children as $child) { ?>
                <li class="drop-dva"><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
                <?php } ?>
              </ul>
              <?php } ?>
            </div>
             </div>

Делаю на стандартном шаблоне ocstore 2.3

Answer 1

[Il'ia Kartovitskii]

Для начала первое, что бросается в глаза: left: 0% перекрывает right: 0%, избыточное свойство.

Во-вторых, пример:

<!-- Условный родительский контейнер .container -->
<div class="container">
    <!-- Список с элементами меню ul -->
    <ul>
        <li>
            <a href="#">Ссылка 1</a>
        </li>
        <li>
            <a href="#">Ссылка 2</a>
        </li>
        <li>
            <a href="#">Ссылка 3</a>
        </li>
    </ul>
</div>

<style>
    .container ul {
        display: block;
        height: 60px;
        line-height: 60px;
        background: #ededed;
    }
    .container ul li {
        display: inline-block;
        list-style-type: none;
        padding: 0 20px;
    }
</style>

В-третьих, как по мне, в вашем вопросе крайне недостаточно входных данных, поэтому ответ построен частично на догадках о том, что требуется.

Comments

[Zman]

Почему вы считаете, что свойства left и right у фиксированно спозиционировапнном элементе избыточны? Ведь данным сочетанием свойств мы растягиваем этот елемент на всю ширину родителя. В противном случае элемент с позицией fixed будет ужиматься до размеров своего содержимого.