Выпадающее меню по клику на изображение?

Пытаюсь сделать/найти выпадающее меню по клику и случайно наткнулся на вариант, реализованный на чистом css.
ul {
    list-style: none;
}

.menu > li {
    float: left;
}
.menu button {
    border: 0;
    background: transparent;
    cursor: pointer;
}
.menu button:hover,
.menu button:focus {
    outline: 0;
    text-decoration: underline;
}

.submenu {
    display: none;
    position: absolute;
    padding: 10px;
}
.menu button:focus + .submenu,
.submenu:hover {
    display: block;
}

<ul class="menu">
    <li>
        <button>Home</button>
        <ul class="submenu">
            <li><a href="http://www.barbie.com">Link</a></li>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
        </ul>
    </li>
    <li><button>More</button></li>
    <li><button>Info</button></li>
</ul>


Я же пытаюсь сделать меню по клику на изображение и вот тут-то проблемы: почему-то именно клик по изображению не дает выводить меню. Вот мой вариант:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style: none;
}

.menu img {
    border: 0;
    background: transparent;
    cursor: pointer;
}
.menu img:hover,
.menu img:focus {
    outline: 0;
    text-decoration: underline;
}

.submenu {
    display: none;
    position: absolute;
    padding: 10px;
}
.menu img:focus + .submenu,
.submenu:hover {
    display: block;
}
</style>
</head>
<body>

<ul class="menu">
        <div><img src="http://site.ru/wp-content/uploads/avatars/18/60cb3400.jpg" class="avatar user-18-avatar avatar-50 photo" width="50" height="50" alt="Картинка профиля пользователя"></div>
        <ul class="submenu">
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
        </ul>
</ul>

</body>
</html>


Автарку я вывожу с помощью, поэтому не могу (не умею) добавить class="".
<?php global $current_user; get_currentuserinfo(); echo '' . get_avatar( $current_user->user_email, 50 ) . '';?>


Подскажите, пожалуйста, что не так с моим вариантом, где закралась ошибка? И еще такой вариант вывода выпадающего меню по клику на чистом css имеет подводные камни, чем например, варианты на JS. Спасибо!

Попробовать вживую - https://fiddle.jshell.net/xte27uc5/
  • Вопрос задан
  • 1348 просмотров
Решения вопроса 1
@AlexanderZe
Интересующийся
Андрей: В целом вот ответ на ваш вопрос.
Несколько деталей:
1) .menu div - клик приходится на обертку картинки, а не на нее лично;
2) <div tabindex="0"> для того чтобы div мог работать с :focus ему необходимо задать этот параметр
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы