Есть горизонтальное меню, как можно поправить, чтобы при наведении было выпадающее меню?
.menu {
background: #444;
position: relative;
overflow: hidden;
height: 40px;
}
.menu ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
left: 50%;
float: left;
height: 40px;
}
.menu ul li {
position: relative;
left: -50%;
float: left;
margin: 0 10px;
height: 40px;
}
.menu ul li a {
color: #fff;
display: block;
text-decoration: none;
padding: 0 15px;
line-height: 40px;
}
.menu ul li a:hover {
background-color: #666;
}
<div class='menu'>
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/users/">Пользователи</a></li>
<li><a href="/editor/">Редактор</a></li>
<ul>
<li><a href="/punct_1/">Пункт 1</a></li>
</ul>
<li><a href="/testing/">Тестирование</a></li>
<li><a href="/results/">Результаты</a></li>
</ul>
</div>