Reactjs 在样式conmpent:下拉菜单中悬停 const DropUl=styled.ul` 宽度：138px； 高度：124px； 边际：0px； 填充：0px； 背景：#FFFFFF； 边框：2px实心#169DA8； 框大小：边框框； 边界半径：4px； 位置：绝对位置； 顶部：55px； **显示：无； &：悬停{ 显示：块； }** ` const-dropi=styled.li` 显示：块； 宽度：106px； 高度：36px； 位置：相对位置； 顶部：10px； 左：20px； ` const DropAncor=styled.a` 文字装饰：无； 字体系列：Rubik； 字体风格：普通； 字体大小：正常； 字体大小：16px； 线高：150%； 颜色：#111111； Saveti 塞斯托·皮坦耶 兽医 伊斯库斯塔瓦

Qestion:

在ul元素上的样式组件中，当它是 悬停以显示块下拉菜单 当我在这个示例上悬停时，什么都没有发生，我使用了&:hover，但它不起作用

---

您可以这样做：

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>

有关更多信息，请参阅

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