Пытаюсь сделать/найти выпадающее меню по клику и случайно наткнулся на вариант, реализованный на чистом 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/ 
