Good day. I have two lines, "Menu_up" and "Menu_bottom." I need to hover effect at the top menu when hovering to the bottom line. The source code was thrown off, I tried to do it, but it did not work ... I think that the error is somewhere on the 16th line. Here is the link. What's wrong? Thank!

<html> <style> ul {list-style: none;} #y-switch { display: block; border: 1px solid #000; } ul #y-switch:hover + ul #y-switcher, #y-switcher:hover { top: 34.9px; opacity: 1; } #y-switcher { display: block; top: 0; opacity: 0; border: 1px solid #000; } #y-switch:hover, ul #y-switch > ul:hover { background: #ffeba0; } </style> <body> <ul class="container"> <li><span id="y-switch">Меню_верхнее</span> <ul> <li><span id="y-switcher">Меню_нижнее</span></li> </ul> </li> </ul> </body> </html> 

1 answer 1

 ul { list-style: none; } #y-switch { display: block; border: 1px solid #000; } ul #y-switch:hover + ul #y-switcher, #y-switcher:hover { top: 34.9px; opacity: 1; } #y-switcher { display: block; top: 0; opacity: 0; border: 1px solid #000; } #y-switch:hover, ul #y-switch > ul:hover { background: #ffeba0; } /* добавлено */ ul.container:hover > li span#y-switch { background: #ffeba0; } 
 <ul class="container"> <li><span id="y-switch">Меню_верхнее</span> <ul> <li><span id="y-switcher">Меню_нижнее</span> </li> </ul> </li> </ul> 

  • Exactly what is needed. Thank! - LexXy