Подскажите, как сделать так чтобы при наведении на пункт фото отобразилось выпадающие меню?
.main-menu {
margin: 0;
padding: 10px 15px;
}
.main-menu li {
display: inline;
margin-right: 60px;
}
.main-menu li a {
color: #383838;
font-size: 21.5px;
text-decoration: none;
}
.main-menu li a:hover {
color: #f0af40;
border-top: 2px solid #f0af40;
}
.sub-menu {
display: none;
}
<ul class="main-menu">
<li><a href="#">Главная</a>
</li>
<li>
<a href="#">Фото</a>
<ul class="sub-menu">
<li><a href="#">Сводебное</a>
</li>
<li><a href="#">Для школ</a>
</li>
<li><a href="#">Для детсадов</a>
</li>
</ul>
</li>
<li><a href="#">Видео</a>
</li>
<li><a href="#">Контакты</a>
</li>
</ul>