reactjs悬停在样式conmpent:下拉菜单中

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>

估计：

我在ul元素的样式组件中做什么下拉菜单悬停以显示块下拉菜单当我悬停在这个例子上时，什么都没发生，我使用&：悬停，但不工作

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

有关详细信息，请参阅文档！