Good evening everyone. I'm trying to build a component using React and use the Style Component to add the CSS. But when adding the Hover effect to the element (a), the effect is also reflected on all the elements inside the (a). As in the picture

<Section>
<PortLogin>
<h1>Welcome to Your Profettional Community</h1>

 <ul>
   <a href="##" ><li href="##">Search For a job</li><i className="fas fa-chevron-right"></i> 
 </a>
   <a  href="##"><li href="##">Find a Person You Know</li><i className="fas fa-chevron-right"> 
 </i></a>
   <a  href="##"><li href="##">Learn a new skill</li><i className="fas fa-chevron-right"></i> 
 </a>
   
 </ul>
 </PortLogin>
 <img src="Img/SectionImg.svg" alt="Img Section "></img>

  </Section>

my styled-components

const Section=styled.div`

display: flex;
justify-content: start;
 flex-wrap:wrap;
 margin-top: 40px;

 & img{
   width: 500px;
   position: absolute;
   right: 0;
     }
 `;

 const PortLogin=styled.div`
 margin-top: 25px;
 display:flex;
 flex-direction:column;
 justify-content:space-around;

 & ul{
  margin-top:50px;
 
     & :hover {
     box-shadow: 3px 3px 8px 2px #00000040;
      }
      }

    & ul>a{
       text-decoration:none;
       padding: 25px 20px;
       margin-bottom: 20px;
       width:70%;
       list-style: none;  
       display: flex;
       justify-content:space-between;
       border: 1px solid #d3cccc;
       border-radius: 13px;
       font-size: larger
     }

      ul li a{
      text-decoration: none;
      color:Black;
     }
      `