Buenas tardes a todos. Estoy tratando de construir un componente usando React y uso el componente de estilo para agregar el CSS. Pero al agregar el efecto Hover al elemento (a), el efecto también se refleja en todos los elementos dentro de (a). como en la imagen

 <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>

mis componentes con estilo

 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; } `