Subnav impossible to hover because of CSS style - html

Question

I have to add a subnav in an existing nav using a CSS style to reach php page.
Existing nav was : nav > ul > li > a href (ok)
I did:
nav > ul > li > a href (ok)
nav > ul > li > ul > li > a href (ko)
I actually can't hover href (ko) with the cursor : items subnav disappear !
I search in CSS style but I don't really understand how it's works.
I want to click on the 2 pages linked in subnav bellow :
accountCustomerAll.php and serviceViewAll.php.
If you have an idea...
Here is my HTML code :
/* Nav Meu Styling */
.nav-menu li a {
padding: 0px;
text-decoration: none;
display: inline-block;
color: #222222;
font-weight: 500;
font-size: 12px;
text-transform: uppercase;
outline: none;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s; }
.nav-menu li a.active, .nav-menu li a:hover {
color: #0093df !important; }
.nav-menu li:hover > a {
color: #000; }
.nav-menu > li {
margin-left: 30px; }
.nav-menu ul {
margin: 28px 0 0 0;
padding: 10px;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
background: #fff; }
.nav-menu ul li {
transition: 0.3s; }
.nav-menu ul li a {
padding: 5px 10px;
color: #333;
transition: 0.3s;
display: block;
font-size: 12px;
text-transform: none; }
.nav-menu ul li:hover > a {
color: #0093df; }
.nav-menu ul ul {
margin-right: 10px;
margin-top: 0; }
<nav id="nav-menu-container">
<ul class="nav-menu">
<li><a>Gérer l'Aérodrome</a>
<ul>
<li>Consulter les clients</li>
<li>Consulter les commandes</li>
</ul>
</li>
</ul>
</nav>

Answer 1

This could be helpful for you. You have to apply different css on inner <ul>.
/* /* Nav Meu Styling */
.nav-menu li {
float: left;
list-style: none; }
.nav-menu li a {
padding: 0px;
text-decoration: none;
display: inline-block;
color: #222222;
font-weight: 500;
font-size: 12px;
text-transform: uppercase;
outline: none;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.nav-menu li a.active,
.nav-menu li a:hover {
color: #0093df !important;
}
.nav-menu li:hover>a {
color: #000;
}
.nav-menu>ul {
padding: 10px;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
background: #fff;
}
.nav-menu ul li {
transition: 0.3s;
transition: 0.3s;
width: 75%;
}
.nav-menu ul li a {
padding: 5px 10px;
color: #333;
transition: 0.3s;
display: block;
font-size: 12px;
text-transform: none;
}
.nav-menu ul li:hover>a {
color: #0093df;
}
.nav-menu ul ul {
margin-right: 10px;
margin-top: 0;
}
.sub-menu {
display: none;
}
.sub-menu>li {
list-style: none;
float: left;
}
ul.nav-menu li a:hover+ul.sub-menu {
display: block;
}
ul.sub-menu:hover {
display: block;
}
<nav id="nav-menu-container">
<ul class="nav-menu">
<li><a>Gérer l'Aérodrome</a>
<ul class="sub-menu">
<li>Consulter les clients</li>
<li>Consulter les commandes</li>
</ul>
</li>
</ul>
</nav>

Answer 2

.nav-menu li a.active, .nav-menu li a:hover{ color: #0093df !important;}
Buggy :active, should be:
.nav-menu li a:active, .nav-menu li a:hover{ color: #0093df}
Please, don't use !importand, debug instead.
Nested structures are hard to maintain, easier would be
<ul><li> <ol><li> ... </li></ol></li></ul>
it is absolutely allowed to style <ol> without numbers.