reactjs hover in style conmpnent: 下拉菜单

Question

const DropUl = styled.ul`
 width:138px;
 height:124px;
 margin:0px;
 padding:0px;
 background: #FFFFFF;
 border: 2px solid #169DA8;
 box-sizing: border-box;
 border-radius: 4px;
 position: absolute;
 top:55px;

**display:none;
&:hover{
 display:block;
 }**

`

const DropLi = styled.li`

  display:block;
  width:106px;
  height:36px;
  position: relative;
  top:10px;
  left:20px;
  
`
const DropAncor = styled.a`
 text-decoration:none;
 font-family: Rubik;
 font-style: normal;
 font-weight: normal;
 font-size: 16px;
 line-height: 150%;
 color: #111111;

<Li parametarWith={'58px'} ><Ancor href="#"> <h5>Saveti</h5></Ancor>
        <DropUl>
          <DropLi><DropAncor href="#">Cesto pitanje</DropAncor></DropLi>
          <DropLi><DropAncor href="#">Veterinar</DropAncor></DropLi>
          <DropLi><DropAncor href="#">Iskustva</DropAncor></DropLi>

        </DropUl>
      </Li>

问题：

I what to make dropm-down menu in style component on ul element when it is hover to display block drop menu When i hover on this example nothing happens i use &:hover but it is not working

Answer 1

你可以这样做：

const DropLi = styled.li`
  display: none;
  width: 106px;
  height: 36px;
  position: relative;
  top: 10px;
  left: 20px; 
`

const DropUl = styled.ul`
  width:138px;
  height:124px;
  margin:0px;
  padding:0px;
  background: #FFFFFF;
  border: 2px solid #169DA8;
  box-sizing: border-box;
  border-radius: 4px;
  position: absolute;
  top:55px;

  &:hover ${DropLi} {
    display: block;
  }
`

查看Doc了解更多信息！

reactjs hover in style conmpnent: 下拉菜单

reactjs hover in style conmpnent: drop-down menu

drop-down-menu

reactjs

styled-components