創(chuàng)建CSS子菜單的步驟如下：

1、HTML結(jié)構(gòu)：我們需要一個(gè)包含子菜單的HTML結(jié)構(gòu)，我們可以使用嵌套的<ul>和<li>元素來創(chuàng)建子菜單。

2、CSS樣式：我們需要使用CSS來定義子菜單的樣式，這包括設(shè)置子菜單的顏色、字體、大小等屬性。

3、JavaScript（可選）：雖然CSS子菜單可以通過純CSS實(shí)現(xiàn)，但如果你想實(shí)現(xiàn)一些交互效果，比如鼠標(biāo)懸停時(shí)顯示子菜單，那么你可能需要使用JavaScript。

示例代碼

下面是一個(gè)簡(jiǎn)單的HTML結(jié)構(gòu)示例，包含了一個(gè)子菜單：

<ul class="menu">
  <li>菜單項(xiàng)1
    <ul class="sub-menu">
      <li>子菜單項(xiàng)1</li>
      <li>子菜單項(xiàng)2</li>
    </ul>
  </li>
  <li>菜單項(xiàng)2</li>
  <li>菜單項(xiàng)3</li>
</ul>

CSS樣式示例

我們可以使用CSS來定義子菜單的樣式：

.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu > li {
  position: relative;
  display: block;
  margin: 10px;
}
.sub-menu {
  position: absolute;
  top: 100%; /* 子菜單出現(xiàn)在父菜單項(xiàng)的下方 */
  left: 0;
  display: none; /* 默認(rèn)情況下不顯示子菜單 */
}
.sub-menu li {
  margin: 5px;
}

交互效果（可選）

如果你想實(shí)現(xiàn)鼠標(biāo)懸停時(shí)顯示子菜單的效果，可以使用JavaScript：

document.querySelector('.menu').addEventListener('mouseover', function(e) {
  var subMenu = e.target.querySelector('.sub-menu');
  if (subMenu) {
    subMenu.style.display = 'block'; // 顯示子菜單
  }
});

創(chuàng)建CSS子菜單需要HTML結(jié)構(gòu)、CSS樣式和JavaScript（可選），通過合理的布局和樣式設(shè)置，你可以輕松地實(shí)現(xiàn)具有吸引力的子菜單效果。