CSS二級菜單顯示鼠標的方法

在CSS中，要實現(xiàn)二級菜單顯示鼠標，可以通過使用JavaScript和CSS樣式來完成，以下是一個簡單的示例，展示了一個基本的二級菜單結構，并在鼠標懸停時顯示子菜單。

我們需要創(chuàng)建一個HTML結構來承載我們的二級菜單，這個結構包括一個主菜單項和一個子菜單項。

<ul class="main-menu">
  <li>主菜單項
    <ul class="sub-menu">
      <li>子菜單項</li>
      <li>子菜單項</li>
    </ul>
  </li>
</ul>

我們將使用CSS來樣式化這個菜單，并設置鼠標懸停時的樣式。

.main-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.main-menu li {
  position: relative;
  display: inline-block;
  padding: 10px;
  margin: 10px;
  cursor: pointer;
}
.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: none;
}
.main-menu li:hover .sub-menu {
  display: block;
}

在這個CSS中，我們隱藏了子菜單，并在主菜單項上懸停時顯示子菜單，我們還添加了一些樣式來美化菜單，如設置列表樣式為無，添加一些內(nèi)邊距和邊距，以及將光標更改為指針。

當您在一個支持JavaScript的環(huán)境中運行這個代碼時，您應該能夠看到一個基本的二級菜單，當您將鼠標懸停在主菜單項上時，子菜單應該會出現(xiàn)，這種方法簡單而有效，可以幫助您創(chuàng)建出用戶友好的界面。