Coloring the parent-menu-point

Question

my problem is that if i hover the submenu, the higher menu does not. I want to hover News AND the subpoint (for example patches). But if I hover Patches, News does not. I hope you can help me

these is my codes.

nav  .aktuell > a{
    background-color: #576574;
}
nav {
    width: 100%;
    height: 48px;
    background-color: #8395A7;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav > ul > li {
    float: left;
}
nav > ul > li > ul {
    display: none;
}
nav > ul a {
    display: block;
    white-space: nowrap;
    padding: 15px;
    background: #8395A7;
    text-decoration: none;
}
nav ul > li > ul > li a {
    background: #8395A7;
    color: white;
}
nav > ul > li:hover > ul {
    display: block;
    position: absolute;
}
nav > ul > li > ul > li {
    position: relative;
}
nav ul li a:hover {
    background-color: #576574;
}
nav ul li a {
    color: white;
}

     <nav>
      <ul>
       <li class="aktuell"><a href="index.html">Startseite</a></li>
       <li><a>News</a>
        <ul>
         <li><a href="news-patches.html">Patches</a></li>
         <li><a href="news-champions.html">Champions</a></li>
           </ul>
       </li>
       <li><a href="guides.html">Guides</a></li>
       <li><a href="kontakt.html">Kontakt</a></li>
       <li><a href="impressum.html">Impressum</a></li>
      </ul>
     </nav>

Thank you for your help :)

if you hover news>patches i want to change the background-color of both to #576574 , but if i hover patches news is not changing the backgroundcolor — Dominik Weber, Nov 29 '18 at 21:12
Hi, see if this helps : https://stackoverflow.com/questions/10953693/changing-the-color-of-a-menu-item-on-hover-of-a-submenu-in-a-sidebar-jsfiddle — jesicadev18, Nov 29 '18 at 21:22

score 1 · Accepted Answer · answered Nov 29 '18 at 21:45

You need to change

nav ul li a:hover {
    background-color: #576574;
}

to

nav ul li:hover > a {
    background-color: #576574;
}

nav  .aktuell > a{
    background-color: #576574;
}
nav {
    width: 100%;
    height: 48px;
    background-color: #8395A7;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav > ul > li {
    float: left;
}
nav > ul > li > ul {
    display: none;
}
nav > ul a {
    display: block;
    white-space: nowrap;
    padding: 15px;
    background: #8395A7;
    text-decoration: none;
}
nav ul > li > ul > li a {
    background: #8395A7;
    color: white;
}
nav > ul > li:hover > ul {
    display: block;
    position: absolute;
}
nav > ul > li > ul > li {
    position: relative;
}
nav ul li:hover > a {
    background-color: #576574;
}
nav ul li a {
    color: white;
}

<nav>
      <ul>
       <li class="aktuell"><a href="index.html">Startseite</a></li>
       <li><a>News</a>
        <ul>
         <li><a href="news-patches.html">Patches</a></li>
         <li><a href="news-champions.html">Champions</a></li>
           </ul>
       </li>
       <li><a href="guides.html">Guides</a></li>
       <li><a href="kontakt.html">Kontakt</a></li>
       <li><a href="impressum.html">Impressum</a></li>
      </ul>
     </nav>

score 0 · Answer 2 · answered Nov 29 '18 at 21:21

0

Replace this line

nav ul li:hover a {
 background-color: #576574;
}

answered Nov 29 '18 at 21:21

Tushar Kumawat

653
9
22

Coloring the parent-menu-point

2 Answers2