本文目錄導讀：

1. HTML結(jié)構(gòu)
2. CSS樣式

如何制作CSS下拉菜單

CSS下拉菜單是一種常用的導航方式，可以方便用戶在網(wǎng)站或應(yīng)用中快速找到所需內(nèi)容，下面介紹如何使用CSS制作下拉菜單。

HTML結(jié)構(gòu)

我們需要一個包含下拉菜單的HTML結(jié)構(gòu)，一個簡單的下拉菜單結(jié)構(gòu)可能包括一個父菜單項和多個子菜單項。

<ul>
  <li>父菜單項
    <ul>
      <li>子菜單項1</li>
      <li>子菜單項2</li>
      <li>子菜單項3</li>
    </ul>
  </li>
  <li>父菜單項2
    <ul>
      <li>子菜單項4</li>
      <li>子菜單項5</li>
    </ul>
  </li>
</ul>

CSS樣式

我們需要使用CSS來定義下拉菜單的樣式，以下是一個簡單的樣式示例：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
}
li {
  float: left;
}
a {
  display: block;
  color: #000;
  text-decoration: none;
}
ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
}