Выпадающее меню не отображается ⇐ CSS

[Anonymous]

Я пытаюсь создать выпадающее меню под «цветами», используя только код CSS. Это не отображается, когда я нахожусь. Я также пытался добавить подчеркивание под цветами, чуть выше предметов под меню. Это работало в какой -то момент, но не больше. Я поднял страницу только в меню. Веб -сайт - MorningStarWoollen.com. Это явно первый раз, когда я создал выпадающее меню. Любая помощь будет создана! < /P>







body {
overflow: hidden;

}
::-webkit-scrollbar{
display: none;
}

.wrapper {
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 125px 1fr auto;
}

.navbar {
grid-row: 1/2;
background: #F2E1D4;
display: inline-block;
position: relative;

}
.navbar li a {
font-family: futura-pt-condensed, sans-serif;
text-transform: uppercase;
font-size: 1.2rem; /*I changed this to 1.2*/
letter-spacing: .08rem;
color: #4f271b;
font-weight: 700;
text-decoration: none;
}
.navbar img {
float: left;
padding-left: 2rem;
max-width: 120px;
}

.main-nav li {
display: inline-block;
position: relative;
text-decoration: none;
list-style: none;
float: left;
padding-top: 4rem;
padding-left: 2rem;
padding-right: .75rem;
}

.main-nav li a {
display: block;
}

.dropdown-menu {
display: none;
position: absolute;
}

.dropdown-menu li:hover{
display: block;
}
.dropdown-menu::after {
margin-top: 2px;
content: '';
position: absolute;
height: 4px;
left: 0;
bottom: 0;
width: 0;
background: lightgreen;
transition: width .10;

}
.dropdown-menu:hover::after {
width: 100%;
}






Shop
[*] Flowers


[*]Weddings
[*]subscriptions
[*]seasonal
[*]custom
[*]growing practices
[/list]

[*] Workshops
[*] Woollens
[*] Yarn
[*] Farm
[*]Contact
[*]About










Подробнее здесь: https://stackoverflow.com/questions/794 ... ot-display