Hello! There is a navigation menu structure:

<nav id="menu" class="navbar"> <div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span> <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <?php foreach ($categories as $category) { ?> <?php if ($category['children']) { ?> <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle"><?php echo $category['name']; ?></a> <div class="dropdown-menu"> <div class="dropdown-inner"> <?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?> <ul class="list-unstyled"> <?php foreach ($children as $child) { ?> <li><a class="adrop" href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li> <?php } ?> </ul> <?php } ?> </div> </li> <?php } else { ?> <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li> <?php } ?> <?php } ?> </ul> </div>

There are CSS properties when the mouse cursor is not aware of the 1st level menu link, then the 2nd level menu drops out, so when I hover over links from the 2nd level menu, the background-color link of the first level disappears, like to avoid it? I want to keep the background-color link from the 1st level menu. CSS properties for the menu:

 #menu .nav > li > a:hover, #menu .nav > li.open > a { background-color: #215289; color: #ffc8aa; }

    1 answer 1

     * { padding: 0; margin: 0; } ul { list-style: none; text-align: center; display: flex; justify-content: space-between; } ul > li { position: relative; } ul > li > a { display: block; background-color: #ccc; color: #000; padding: 12px 25px; } ul > li > ul { display: none; position: absolute; top: 100%; left: 0; } ul > li:hover > ul { display: block; } ul > li:hover > a { background-color: #215289; color: #ffc8aa; } ul > li > ul > li a:hover { background: #000; } 
     <ul> <li> <a href="#">menu 1</a> <ul> <li> <a href="#">menu 2</a> </li> <li> <a href="#">menu 2</a> </li> <li> <a href="#">menu 2</a> </li> </ul> </li> <li> <a href="#">menu 1</a> </li> <li> <a href="#">menu 1</a> </li> </ul>