好看的html导航栏代码

以下是一个美观的HTML导航栏代码示例：

HTML代码：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li>
      <a href="#">产品</a>
      <ul>
        <li><a href="#">产品1</a></li>
        <li><a href="#">产品2</a></li>
        <li><a href="#">产品3</a></li>
      </ul>
    </li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

CSS代码：

nav {
  background-color: #333;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

li {
  margin: 0 20px;
  position: relative;
}

a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
  transition: color 0.3s ease;
}

a:hover {
  color: #ff9900;
}

ul ul {
  position: absolute;
  top: 60px;
  left: 0;
  background-color: #333;
  display: none;
  z-index: 1;
}

li:hover > ul {
  display: flex;
  flex-direction: column;
}

ul ul li {
  width: 150px;
  padding: 10px;
  margin: 0;
}

ul ul a {
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0;
  padding: 10px;
}

ul ul a:hover {
  background-color: #ff9900;
}

@media screen and (max-width: 768px) {
  nav {
    height: auto;
  }
  
  ul {
    flex-direction: column;
  }
  
  li {
    margin: 10px 0;
    position: relative;
  }
  
  ul ul {
    position: static;
    background-color: #333;
    display: none;
  }
  
  li:hover > ul {
    display: block;
  }
}

解释：

- `nav` 元素设置为灰色背景色，高度为60像素，并使用flex布局居中导航项。
- `ul` 元素设置为没有列表样式，无间距和填充，并使用flex布局排列导航项。
- `li` 元素设置为左右有20像素的间距，并设置为相对定位。
- `a` 元素设置为白色文本，没有下划线和背景色，并使用加粗字体、1像素字母间距，以及鼠标悬停时的橙色变化。
- `ul ul` 元素设置为绝对定位，位于上级菜单项下方，背景色为灰色，最初不可见，并设置层级为1。
- `li:hover > ul` 选择器设置为鼠标悬停在上级菜单项上时，该菜单项下方的子菜单显示为一个垂直列。
- `ul ul li` 元素设置为固定宽度150像素、内边距10像素，并去掉外边距。
- `ul ul a` 元素设置为14像素字体大小、正常字体加粗、0像素字母间距、10像素内边距。
- `ul ul a:hover` 选择器设置为鼠标悬停在子菜单项上时，背景色变为橙色。

此外，代码还包括响应式设计，当屏幕宽度小于768像素时，导航栏变为垂直排列，并且子菜单项不再使用绝对定位。