In my categories (categories) listed iPhone , iPad etc.. So here's how to do it when you hover on a дроп лист automatic hover over a category. That is, if I put on the iPhone x let's say, the iPhone was glowing too.

 li { list-style: none; } .menu { display: flex; justify-content: center; max-width: 700px; max-height: 90px; height: 100%; margin: auto; background-color: black; border: 1px solid #fff; } .menu:hover { border: 1px solid coral; } .categories a { color: #fff; text-decoration: none; margin-right: 25px; padding: 10px 0px; } .categories a:hover { color: coral; } .btn { display: inline-block; color: #fff; font-size: 1rem; font-weight: 400; background-color: transparent; border: 1px solid #fff; border-radius: 50px; padding: 10px; cursor: pointer; outline: none; letter-spacing: 3px; } .btn:hover { background-color: transparent; border: 1px solid coral; color: coral; } ul { display: flex; margin: 0; padding: 0; list-style: none; } ul.categories>li { align-items: center; display: flex; list-style: none; position: relative; z-index: 1; } .submenu { z-index: -1; padding: 10px 0px; background-color: black; overflow: hidden; display: none; width: 200px; position: absolute; line-height: 1.5rem; top: 40px; left: 0; } .submenu li { width: 200px; display: block; } .submenu li a { display: block; background-color: transparent; } .submenu li:hover { display: block; padding-left: 5px; background-color: transparent; } .categories li:hover .submenu { display: block; border-left: 1px solid coral; border-bottom: 1px solid coral; } .categories button:hover+.submenu { color: coral; } 
 <nav class="menu"> <ul class="categories"> <li><a href="#"><button class="btn" type="">iPhone</button> </a> <ul class="submenu"> <li><a href="#">iPhone X</a></li> <li><a href="#">iPhone 8 Plus</a></li> <li><a href="#">iPhone 8</a></li> <li><a href="#">iPhone 7 Plus</a></li> </ul> </li> <li><a href="#"><button class="btn" type="">iPad</button></a> <ul class="submenu"> <li><a href="#">iPad Pro</a></li> <li><a href="#">iPad 2017</a></li> <li><a href="#">iPad Mini</a></li> <li><a href="#">iPad Air 2</a></li> </ul> </li> <li><a href="#"><button class="btn" type="">Mac</button></a> <ul class="submenu"> <li><a href="#">iMac Pro</a></li> <li><a href="#">iMac 2017</a></li> <li><a href="#">iMac 2016</a></li> <li><a href="#">iMac 2015</a></li> </ul> </li> <li><a href="#"><button class="btn" type="">Watch</button></a> <ul class="submenu"> <li><a href="#">Watch Series 1</a></li> <li><a href="#">Watch Series 2</a></li> <li><a href="#">Watch Series 3</a></li> <li><a href="#">Watch Series 3 (Edition)</a></li> </ul> </li> <li><a href="#"><button class="btn" type="">Accessories</button></a> <ul class="submenu"> <li><a href="#">Apple Mini DisplayPort</a></li> <li><a href="#">Мышь Apple Magic Mouse 2</a></li> <li><a href="#">Apple USB-C Digital AV </a></li> <li><a href="#">Трекпад Apple Magic Trackpad 2 </a></li> </ul> </li> </ul> </nav>

  • It is not clear the essence of the question, what does "hover category" mean? - Arsen
  • I have in categories (Categories) listed iPhone, iPad, etc. So here's how to do it when you hover on a drop list with an automatic hover over a category. That is, if I put on the iPhone x, let's say, the iPhone was glowing too. - Andrei
  • one
    Let me rewrite the code, you have an incorrectly constructed html structure - ishidex2

2 answers 2

I did not change the structure and did not change your layout , but corrected and the css fragment of interest looks like this:

 li:hover a>.btn { border: 1px solid green;color: green;}

and the implementation itself is as follows:

 li { list-style: none; } .menu { display: flex; justify-content: center; max-width: 700px; max-height: 90px; height: 100%; margin: auto; background-color: black; border: 1px solid #fff; } .menu:hover { border: 1px solid coral; } .categories a { color: #fff; text-decoration: none; margin-right: 25px; padding: 10px 0px; } .categories a:hover { color: coral; } .btn { display: inline-block; color: #fff; font-size: 1rem; font-weight: 400; background-color: transparent; border: 1px solid #fff; border-radius: 50px; padding: 10px; cursor: pointer; outline: none; letter-spacing: 3px; } .btn:hover { background-color: transparent; border: 1px solid coral; color: coral; } ul { display: flex; margin: 0; padding: 0; list-style: none; } ul.categories>li { align-items: center; display: flex; list-style: none; position: relative; z-index: 1; } .submenu { z-index: -1; padding: 10px 0px; background-color: black; overflow: hidden; display: none; width: 200px; position: absolute; line-height: 1.5rem; top: 40px; left: 0; } .submenu li { width: 200px; display: block; } li:hover a>.btn { border: 1px solid green; color: orange; } .submenu li a { display: block; background-color: transparent; } .submenu li:hover { display: block; padding-left: 5px; background-color: transparent; } .categories li:hover .submenu { display: block; border-left: 1px solid coral; border-bottom: 1px solid coral; } .categories button:hover+.submenu { color: coral; } 
 <nav class="menu"> <ul class="categories"> <li><a href="#"><button class="btn" type="">iPhone</button> </a> <ul class="submenu"> <li><a href="#">iPhone X</a></li> <li><a href="#">iPhone 8 Plus</a></li> <li><a href="#">iPhone 8</a></li> <li><a href="#">iPhone 7 Plus</a></li> </ul> </li> <li><a href="#"><button class="btn" type="">iPad</button></a> <ul class="submenu"> <li><a href="#">iPad Pro</a></li> <li><a href="#">iPad 2017</a></li> <li><a href="#">iPad Mini</a></li> <li><a href="#">iPad Air 2</a></li> </ul> </li> <li><a href="#"><button class="btn" type="">Mac</button></a> <ul class="submenu"> <li><a href="#">iMac Pro</a></li> <li><a href="#">iMac 2017</a></li> <li><a href="#">iMac 2016</a></li> <li><a href="#">iMac 2015</a></li> </ul> </li> <li><a href="#"><button class="btn" type="">Watch</button></a> <ul class="submenu"> <li><a href="#">Watch Series 1</a></li> <li><a href="#">Watch Series 2</a></li> <li><a href="#">Watch Series 3</a></li> <li><a href="#">Watch Series 3 (Edition)</a></li> </ul> </li> <li><a href="#"><button class="btn" type="">Accessories</button></a> <ul class="submenu"> <li><a href="#">Apple Mini DisplayPort</a></li> <li><a href="#">Мышь Apple Magic Mouse 2</a></li> <li><a href="#">Apple USB-C Digital AV </a></li> <li><a href="#">Трекпад Apple Magic Trackpad 2 </a></li> </ul> </li> </ul> </nav>

    I rewrote the code, the bottom line is that when you hover over .category links change color, and since .submenu descendant of the class .category , the pointing also occurs in .category . I deleted the button because for the menu buttons it is better to use just links.

     * { margin: 0; padding: 0; } body { font-family: sans-serif; } .menu { padding: 10px; background: #222; } .menu .categories { display: flex; list-style-type: none; } .menu .categories .category { padding: 0 10px; } .menu .categories .category a { color: #fff; } .menu .categories .category:hover a { color: #ff7300; } .menu .categories .category:hover .submenu { display: block; } .menu .categories .category .submenu { list-style-type: none; position: absolute; background: #222; padding: 10px; display: none; } .menu .categories .category .submenu li a { color: #fff; } .menu .categories .category .submenu li a:hover { color: #ff7300; } 
     <nav class="menu"> <ul class="categories"> <li class="category"> <a href="#" class="btn">IPhone</a> <ul class="submenu"> <li><a href="#">iPhone X</a></li> <li><a href="#">iPhone 8 Plus</a></li> <li><a href="#">iPhone 8</a></li> <li><a href="#">iPhone 7 Plus</a></li> </ul> </li> <li class="category"> <a href="#" class="btn">IPhone</a> <ul class="submenu"> <li><a href="#">iPhone X</a></li> <li><a href="#">iPhone 8 Plus</a></li> <li><a href="#">iPhone 8</a></li> <li><a href="#">iPhone 7 Plus</a></li> </ul> </li> <li class="category"> <a href="#" class="btn">IPhone</a> <ul class="submenu"> <li><a href="#">iPhone X</a></li> <li><a href="#">iPhone 8 Plus</a></li> <li><a href="#">iPhone 8</a></li> <li><a href="#">iPhone 7 Plus</a></li> </ul> </li> <li class="category"> <a href="#" class="btn">IPhone</a> <ul class="submenu"> <li><a href="#">iPhone X</a></li> <li><a href="#">iPhone 8 Plus</a></li> <li><a href="#">iPhone 8</a></li> <li><a href="#">iPhone 7 Plus</a></li> </ul> </li> <li class="category"> <a href="#" class="btn">IPhone</a> <ul class="submenu"> <li><a href="#">iPhone X</a></li> <li><a href="#">iPhone 8 Plus</a></li> <li><a href="#">iPhone 8</a></li> <li><a href="#">iPhone 7 Plus</a></li> </ul> </li> </ul> </nav>