1

Суть простая, при клике на иконку меню должен выпадать список, во всяком случае так казаться :) Подсмотрел технику в одном уроке, но что-то не сработало.

.menu:focus .dropdown{
display: block;
}

.main-head .dropdown{
position: absolute;
margin-top: 85px;
right: 210px;
display: none;
}

<header class="main-head">      
    <div id="logo">
        <p>Smart</p>
    </div>
    <button class="button menu"></button>
    <ul class="dropdown">
        <li>
            <a href="">Menu1</a>
        </li>
        <li>
            <a href="">Menu2</a>
        </li>
        <li>
            <a href="">Menu3</a>
        </li>
        <li>
            <a href="">Menu4</a>
        </li>
    </ul>
</header>

1 ответ 1

2

Вы не правильно указали имя элемента. Что бы указать элемент, который находиться на одном уровне, нужно ставить ~

.menu:focus ~ .dropdown{
display: block;
}

.main-head .dropdown{
position: absolute;
margin-top: 85px;
right: 210px;
display: none;
}
<header class="main-head">      
    <div id="logo">
        <p>Smart</p>
    </div>
    <button class="button menu">Кнопка</button>
    <ul class="dropdown">
        <li>
            <a href="">Menu1</a>
        </li>
        <li>
            <a href="">Menu2</a>
        </li>
        <li>
            <a href="">Menu3</a>
        </li>
        <li>
            <a href="">Menu4</a>
        </li>
    </ul>
</header>

1
  • Спасибо! А я то думал..) 23 дек 2016 в 22:15

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.