Приспичило, а иначе не скажешь, мне начать верстать сайт с тегами html5, а мат.часть знаю плохо, но знаю немного. Решил верстать не дивами, а использовать тег menu, но столкнулся с проблемой, что
не могу собрать выпадающее меню и
не могу выровнять логотип с кнопками меню. Тег сам понравился тем, что не надо париться с тем, чтобы элементы тега выставить по ширине экрана. Для полноты картины, прикладываю нужную часть html/css кода и картинку - как это выглядит прямо сейчас. Полазил в google, youtube - ответа не нашел внятного. Ну и под конец суть вопросов:
1. Как выровнять высоту кнопок тега menu относительно логотипа?
2. Как сделать, чтобы тег menu отображал выпадающие пункты
(закомментированы)?
Часть кода html<body>
<menu class="navbar">
<li>
<img class="logo" src="img/bibl_logo.png" alt="home">
<button>Ресурсы</button>
<!--<menu class="submenu"> вложенное меню
<li>
<button>Фонды</button>
<button>Каталоги</button>
<button>Переодические издания</button>
<button>Краеведение</button>
</li>
</menu>-->
<button>Читателям</button>
<!--<menu class="submenu"> вложенное меню
<li>
<button>Советуем почитать</button>
<button>Виртуальные выставки</button>
<button>Наши буктрейлеры</button>
</li>
</menu>-->
<button>О нас</button>
<!--<menu class="submenu"> вложенное меню
<li>
<button>Структура ГЦБС</button>
<button>Официальные документы</button>
<button>Услуги</button>
<button>Вакансии</button>
</li>
</menu>-->
<button>Контакты</button>
<!--<menu class="submenu"> вложенное меню
<li>
<button>Обратная связь</button>
</li>
</menu>-->
<button>Карта сайта</button>
<button>Соц.сети (модуль)</button>
</li>
</menu>
<body>
Часть кода css.navbar{
margin: 0;
padding: 0;
text-align: center;
background: #f0f0f0;
}
.navbar, li{
list-style-type: none;
}
.navbar, button{
font-weight: bolder;
text-transform: uppercase;
color: red;
text-decoration: none;
padding: 8px 20px;
.logo{
margin: 0;
padding: 0;
width: 4%;
height: auto;
}
P. S. Да, знаю, что img будет правильнее обернуть в div и последнему уже присваивать класс, а не как сделал я 
Средний
