ul.nav ul li {
position:relative;
list-style:none;

}
ul.nav ul li a {
display:block;
padding: 7px 12px;
color: #fff;
font-size:14px;
}

ul.nav> li:hover >ul {
top: 50px;
visibility:visible;
opacity: 1;

}

Kodlarınızın arasına bunu eklediğinizde açılır menü çalışacaktır.

https://codepen.io/muhammedkoc/pen/vKyybg bu örneğe bakarak daha iyi anlayacaksınızdır.


WordPress Menü olarak kullanacağınızı düşündüğümden dolayı o WordPress otomatik menü için .menu ulan bir ul kullanıyor ve bu mantıkla sizin ul içindeki lilere müdahale etmeniz yani class atamanız biraz zor olacaktır aşağıdaki kodları kullandığınızda bu sorunun önünü aşmış ve döngüye sokmuş oluyorsunuz 5 tane renk atadıktan sonra sürekli şekilde bu döngü dönecektir.

.menu>li:nth-child(1n)>a{
border-bottom: 6px solid #d31717;
}
.menu>li:nth-child(1n)>a:hover{
background-color: #d31717;
color: #FFF;
transition: background-color .2s, color .2s;
}
.menu>li:nth-child(2n)>a{
border-bottom: 6px solid #17d3a5;
}
.menu>li:nth-child(2n)>a:hover{
background-color: #17d3a5;
color: #FFF;
transition: background-color .2s, color .2s;
}
.menu>li:nth-child(3n)>a{
border-bottom: 6px solid #E88447;
}
.menu>li:nth-child(3n)>a:hover{
background-color: #E88447;
color: #FFF;
transition: background-color .2s, color .2s;
}
.menu>li:nth-child(4n)>a{
border-bottom: 6px solid #6cd122;
}
.menu>li:nth-child(4n)>a:hover{
background-color: #6cd122;
color: #FFF;
transition: background-color .2s, color .2s;
}

.menu>li:nth-child(5n)>a{
border-bottom: 6px solid #AB40E8;
}
.menu>li:nth-child(5n)>a:hover{
background-color: #AB40E8;
color: #FFF;
transition: background-color .2s, color .2s;
}



wordpress açılır menü için takipteyim :)