html - 如何使用 CSS3 区分菜单和下拉子菜单

Question

我在子菜单方面遇到了一些问题，我想要的只是在单击他的父项时让子菜单具有不同的颜色，但我不希望子菜单从父项继承 .active 类样式，就像在我的代码中一样。当前，当单击父级“Usluge”时，子菜单将全部变为灰色，并且需要为深蓝色。在悬停时它表现正常，就像它应该的那样。有人可以帮忙吗？

这是 HTML:

            <header class="topheader">
            <nav>
                <div class="nav-btn"></div>
                <ul class="navi">
                    <li><a href="index.html">Početna</a></li>
                    <li><a href="o_nama.html">O nama</a></li>
                    <li><a href="ordinacija.html">Ordinacija</a></li>
                    <li class="active"><a href="usluge.html">Usluge</a>
                        <ul>
                            <li><a href="usluge.html">Restaurativna dentalna medicina</a></li>
                            <li><a href="usluga2.html">Estetska dentalna medicina</a></li>
                            <li><a href="usluga3.html">Dječja dentalna medicina</a></li>
                            <li><a href="usluga4.html">Endodoncija</a></li>
                            <li><a href="usluga5.html">Dentalna protetika</a></li>
                            <li><a href="usluga6.html">Oralna kirurgija</a></li>
                            <li><a href="usluga7.html">Parodontologija</a></li>
                            <li><a href="usluga8.html">Rendgen</a></li>
                        </ul>
                    </li>
                    <li><a href="kontakt.html">Kontakt</a></li>
                </ul>
            </nav>
            </header>

这是 CSS:

 /*---MENU---*/
.topheader a {
    text-decoration: none;
    display:inline-block;
}

.topheader nav{
    text-align:left;
    margin-left: 50%;
    position:absolute;
    margin-top:169px;
    width:490px;
    padding:0;
}

.topheader nav ul{
    list-style: none;
    margin: 0 auto;
    padding:0;
    display:inline-block;
}

.topheader nav ul li{
    float: left;
    display: inline-block;
    position:relative;
    margin:0;
    padding:0;
}

.topheader ul li a:link, .topheader ul li a:visited{
    color: #FFF;
    display: inline-block;
    padding: 17px 20px;
    font-size: 110%;
    height: 16px;
}

.topheader nav a:hover, .topheader nav a:active, .topheader ul .active a:link{
    background-color: #aeadad;
    text-shadow: none;
}

/*---SUBMENU---*/
.topheader ul li ul{
    position:absolute;
    visibility:hidden;
    display:block;
    z-index:10000;
}

.topheader ul li ul li{
    text-align:left;
    padding:0;
    margin:0;
    width:150px;
}

.topheader ul li ul li a{
    padding:0;
    margin:0;
    width:130px;
    background-color: #01415a;
    border-top: 1px solid #7bc4f1;
}

.topheader ul li ul a:link, .topheader ul li ul a:visited{
    color: #FFF;
    display:table-cell;
    padding:15px 15px;
    font-size: 105%;
}

.topheader ul li ul li:hover, .topheader ul li ul a:hover{
    background-color: #68a2ba;
}

.topheader ul li:hover ul{
    visibility:visible;
}

.topheader nav ul li a:active .topheader nav ul li ul li a{
   background-color: #01415a;
}

Answer 1

请更正您的 css 概念....

下面是一些示例链接，可帮助您清除下拉菜单概念...

1) First Link

2) Second Link

3) Third Link

这些链接包含不同样式的下拉菜单，如果您有一些基本的 css 概念，就很容易理解...