задался такой вопрос, как в теге ul сделать что бы hover срабатывал только в теге ?<li>

li:hover {} не предлогать


я понимаю что я ховер задаю и родителю top-menu

как можно обойти это?
а как у меня то вот.

.top-menu 

 {

 box-shadow: 0 5px 19px 2px rgba(0,0,0,0.2);

   background:rgb(255,255,255);

   width:100%;

   list-style-type: none;

     list-style-position: none;

     display: flex;

     justify-content:left;

     align-items: center;    

     margin:0;

     padding:5px;    

 }

 

 

  .top-menu > li a

 {

 margin:0;

 width:130px;

 box-shadow: 0 5px 19px 2px rgba(0,0,0,0.2);

 margin:0 0.6em 0 0.5em;

 padding:5px;

 display:inline-block;

  background:rgb(255,255,255);

 text-align:center;

 }

 

 .top-menu:hover a  { background:rgb(255,255,255); opacity:0.5;   }

echo "<ul class='top-menu'>";

 

 echo "<li><a href='?sort=balls&amp;DESC&amp;page=$page'>баллы</a></li> \n";

 echo "<li><a href='?sort=level&amp;DESC&amp;page=$page'>статус</a></li>\n";

 echo "<li><a href='?sort=rating&amp;DESC&amp;page=$page'>рейтинг</a></li> \n";

 echo "<li><a href='?sort=id&amp;ASC&amp;page=$page'>id</a></li> \n";

 echo "<li><a href='?sort=pol&amp;ASC&amp;page=$page'>пол</a></li> \n";

 echo "<li><a href='?sort=id&amp;DESC&amp;page=$page'>новые</a></li>\n";

 

 echo "</ul>";