Drop-Down Menu
One Level Drop Down
HTML:
<nav >
<ul class="nav">
<li class="nav__item">
<a href="#" class="nav__link">link text</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">link text</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">link with drop</a>
<!-- drop-down list -->
<ul class="nav__drop drop">
<li class="drop__item">
<a href="#" class="drop__link">sub link 1</a>
</li>
<li class="drop__item">
<a href="#" class="drop__link">Long long long long sub link 2</a>
</li>
<li class="drop__item">
<a href="#" class="drop__link">sub link 3</a>
</li>
</ul>
</li>
<li class="nav__item">
<a href="#" class="nav__link">link text</a>
</li>
</ul>
</nav>
CSS:
/* general styles*/
a{
color: #fff;
text-decoration: none;
}
a:hover{text-decoration: underline;}
/* elements/blocks styles */
/* nav styles */
.nav{
width: 80%;
margin: 50px auto 200px;
list-style: none;
font-weight: bold;
text-transform: uppercase;
background: #ffa500;
padding: 15px;
border-radius: 20px;
box-shadow: inset 0 0 5px 0 #f00, 0 0 0 12px #ccc;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly; /* flex-start | flex-end | center | space-between | space-around | space-evenly */
}
.nav__item{
margin: 0 10px;
}
.nav__link{
display: block;
padding: 10px;
border: 1px solid #fff;
text-decoration: none;
}
.nav__link:hover{
text-decoration: none;
border-color: #000;
color: #000;
}
/* drop styles */
.drop{
position: absolute;
top: 100%;
left: -3000px;
list-style: none;
padding: 10px;
margin: 0;
background: #ccc;
text-transform: none;
line-height: 2;
width: calc(100% - 2*10px);
box-shadow: 0 0 10px #000;
opacity: 0;
}
/* action styles */
.nav__item:hover{
position: relative;
}
.nav__item:hover .nav__link{
position: relative;
/* z-index: 1; */
background: #eee;
}
.nav__item:hover .drop{
left: 0;
opacity: 1;
transition: left 0.7s linear 0.1s, opacity 1.5s linear;
}
Дополнительное задание:
- Как ведет себя выпадающий список по ширине и почему
- Зачем на
.nav__link
прописанdisplay: block;
- Зачем на
.navitem:hover .nav__link
прописанposition: relative; z-index: 1;
- Вторая ссылка в дропе длинная и выглядит как две ссылки, как можно улучшить визуальное отображение ссылок.
- Как сделать чтоб ширина выпадающего списка была по ширине самого длинного внутреннего его элемента, а не по ширине элемента спискав котором находится этот дроп-даун
- Сделать на основе этой одноуровневой дроп-даун навигации - многоуровневую
- В дроп-дауне второго уровня слова текста ссылок должны начинаться с заглавных букв, при наведении цветт текста ссылки и фон должны изменяться.
- Сделать одноуровневое многоколоночное выпадающее меню