Subnav невозможно навести из-за стиля CSS

Question

Мне нужно добавить subnav в существующую навигацию, используя стиль CSS, чтобы перейти на страницу php.

Существующая навигация была: nav > ul > li > a href (ok)

Я сделал:

 nav > ul > li > a href (ok)
 nav > ul > li > ul > li > a href (ko)

На самом деле я не могу навести курсор на href (ko): элементы subnav исчезают! Я ищу в стиле CSS, но я не совсем понимаю, как это работает.

Я хочу щелкнуть по 2 страницам, указанным в субнавке ниже: accountCustomerAll.php и serviceViewAll.php.

Если есть идеи ...

Вот мой HTML код:

/* 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><a href="accountCustomerAll.php">Consulter les clients</a></li>
            <li><a href="serviceViewAll.php">Consulter les commandes</a></li>
        </ul>
    </li>
</ul>
</nav>

Answer 1

.nav-menu li a.active, .nav-menu li a:hover{ color: #0093df !important;}

Ошибка: активна, должна быть:

.nav-menu li a:active, .nav-menu li a:hover{ color: #0093df}

Пожалуйста, не используйте !importand вместо отладки. Вложенные структуры сложно поддерживать, проще было бы

<ul><li>  <ol><li> ... </li></ol></li></ul>

абсолютно разрешено стилизовать <ol> без номеров.

Answer 2

Это может быть полезно для вас. Вы должны применить другой css на внутреннем <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><a href="accountCustomerAll.php">Consulter les clients</a></li>
                    <li><a href="serviceViewAll.php">Consulter les commandes</a></li>
                </ul>
            </li>
          
        </ul>
    </nav>