由于 CSS 样式，子导航无法悬停

Question

我必须使用 CSS 样式在现有导航中添加子导航才能到达 php 页面。

现有导航是：nav > ul > li > a href (ok)

我做到了：

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

我实际上不能用光标悬停href（ko）：items 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

这可能对您有所帮助。您必须在内部<ul> 上应用不同的css。

/*   /* 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>

Answer 2

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

Buggy :active，应该是：

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

请不要使用!importand，而是调试。
嵌套结构很难维护，更容易

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

绝对允许在没有数字的情况下设置<ol> 的样式。