CSS导航栏

CSS导航栏是网页设计中常见的一种组件，通常用于导航网站的不同页面或不同部分。CSS导航栏可以有多种样式、结构和功能，如下拉菜单、响应式设计等。

基本结构

CSS导航栏的基本结构包括一个包含导航链接的容器和导航链接本身。容器可以是div、nav或header元素，导航链接可以是ul和li元素的组合。

<nav>
  <ul>
    <li><a href="#">链接1</a></li>
    <li><a href="#">链接2</a></li>
    <li><a href="#">链接3</a></li>
  </ul>
</nav>

以上代码定义了一个包含3个链接的导航栏，可以在CSS中添加样式来设置导航栏的外观。

常用样式

以下是一些常用的CSS样式，可以用来制作CSS导航栏。

横向导航栏

横向导航栏是一种水平排列的导航栏，可以使用以下样式。

nav {
  display: inline-block;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
}

a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: black;
}

a:hover {
  background-color: grey;
  color: white;
}

以上样式使用inline-block来实现导航栏的水平排列，使用display:block和padding来设置链接的样式，使用:hover来添加鼠标悬停时的样式。

垂直导航栏

垂直导航栏是一种垂直排列的导航栏，可以使用以下样式。

nav {
  display: inline-block;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: block;
}

a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: black;
}

a:hover {
  background-color: grey;
  color: white;
}

以上样式使用display:block让链接呈现块级元素，使用display:block构建垂直导航栏。

下拉菜单

下拉菜单可以让导航栏具有更多的功能，可以使用以下样式。

nav {
  display: inline-block;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

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

a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: black;
}

a:hover {
  background-color: grey;
  color: white;
}

ul ul {
  display: none;
  position: absolute;
  top: 100%;
}

li:hover > ul {
  display: block;
}

ul ul li {
  display: block;
}

以上样式使用了position:relative和position:absolute来实现下拉菜单效果，使用:hover来在鼠标悬停时显示下拉菜单。最后一个样式ul ul li用来设置下拉菜单样式。