CSS 下拉菜单

在网页设计中，下拉菜单是一种常见的导航方式，可以帮助用户快速找到他们需要的信息。在CSS中，我们可以通过一些简单的样式来实现一个漂亮的下拉菜单。

基本结构

首先，我们需要一个基本的HTML结构来创建一个下拉菜单。通常，我们会使用无序列表（<ul>）来实现下拉菜单的结构，其中每个菜单项使用列表项（<li>）来表示。

// www.javascriptcn.com code example
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
      <a href="#">Services</a>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Graphic Design</a></li>
        <li><a href="#">Digital Marketing</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS样式

接下来，我们可以使用CSS来为我们的下拉菜单添加样式。我们可以使用伪类（:hover）来控制菜单项的显示与隐藏。

// www.javascriptcn.com code example
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav ul li {
  position: relative;
  display: inline-block;
}

nav ul li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
}

nav ul li ul {
  display: none;
  position: absolute;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

nav ul li:hover ul {
  display: block;
}

nav ul li ul li {
  display: block;
}

nav ul li ul li a {
  padding: 8px 20px;
  color: #333;
}

nav ul li ul li a:hover {
  background-color: #f4f4f4;
}

通过以上的CSS样式，我们可以实现一个简单的下拉菜单。当鼠标悬停在父菜单项上时，子菜单会显示出来，方便用户进行导航。

结语

下拉菜单是网页设计中常用的一种导航方式，通过合适的HTML结构和CSS样式，我们可以轻松地创建一个漂亮的下拉菜单，提升用户体验。