When you hover over an item in a list, all items in the list change with its items in the sublist. I want hover change the elements of a sublist separately.

 #work-menu li { margin-bottom: 5px; font-size: 16px; list-style-position: outside; } #work-menu li:hover { text-shadow: 0 0 15px #A9A9A9; text-decoration: underline; } #work-menu ol { margin-bottom: 5px; margin-top: 5px; font-size: 16px; list-style-position: outside; } #work-menu ol:hover { text-shadow: 0 0 15px #A9A9A9; text-decoration: underline; } 
 <div id="work-menu"> <h3>Основные виды работ:</h3> <li><a href="1.html">Отделка фасадов камнем</a> <ol> <li> <a href="otdelka-fasadov-mramorom.html"></a>Отделка фасадов мрамором</li> </ol> </li> <li><a href="2.html">Декоративная штукатурка</a> </li> <li><a href="3.html">Оформление трафаретами</a> </li> <li><a href="4.html">Плиты</a> </li> <li><a href="5.html">Декорирование фасада</a> </li> </div>

    2 answers 2

    All the problems from the fact that you catch the event guidance on li . Since ol is located inside li , then pointing to it and its children li causes the :hover and the parent element li .

    Refine the selector to a , then achieve the desired effect. Here is your code with minimal changes:

     #work-menu li { margin-bottom: 5px; font-size: 16px; list-style-position: outside; } #work-menu ol { margin-bottom: 5px; margin-top: 5px; font-size: 16px; list-style-position: outside; } #work-menu a:hover { text-shadow: 0 0 15px #A9A9A9; text-decoration: underline; } 
     <ul id="work-menu"> <h3>Основные виды работ:</h3> <li><a href="1.html">Отделка фасадов камнем</a> <ol> <li><a href="otdelka-fasadov-mramorom.html">Отделка фасадов мрамором</a></li> </ol> </li> <li><a href="2.html">Декоративная штукатурка</a> </li> <li><a href="3.html">Оформление трафаретами</a> </li> <li><a href="4.html">Плиты</a> </li> <li><a href="5.html">Декорирование фасада</a> </li> </ul>

      It is necessary to fix the CSS property #work-menu ol on #work-menu ol li :

       #work-menu li { margin-bottom: 5px; font-size: 16px; list-style-position: outside; } #work-menu li:hover { text-shadow: 0 0 15px #A9A9A9; text-decoration: underline; } #work-menu ol li { margin-bottom: 5px; margin-top: 5px; font-size: 16px; list-style-position: outside; } #work-menu ol li:hover { text-shadow: 0 0 15px #A9A9A9; text-decoration: underline; } 
       <div id="work-menu"> <h3>Основные виды работ:</h3> <li><a href="1.html">Отделка фасадов камнем</a> <ol> <li> <a href="otdelka-fasadov-mramorom.html"></a>Отделка фасадов мрамором</li> </ol> </li> <li><a href="2.html">Декоративная штукатурка</a> </li> <li><a href="3.html">Оформление трафаретами</a> </li> <li><a href="4.html">Плиты</a> </li> <li><a href="5.html">Декорирование фасада</a> </li>

      • I copied your code - nothing has changed - Naddyson