230930 233116.gif

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>

  <div >测试
    <ul >
      
      <li >列表</li>
      
      <li >列表2</li>
      
      <li >列表3</li>
      
      <li >列表4</li>
      
      <li >列表5</li>
      
      <li >列表6</li>
      
      <li >列表7</li>
      
      <li >列表8</li>
    
      
      <li >列表9</li>
      
    </ul>
  </div>
  
</body>
</html>

css

ul {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

div:hover > ul {
  display: grid;
}

li {
  list-style: none;
}