css下拉式导航栏鼠标移上

CSS下拉式导航栏可以让网站导航更加清晰、美观。当鼠标移上导航条时，下拉菜单出现。这样的效果不仅方便了用户的使用，也能让网站更加优雅。

/*CSS代码*/
nav {
  background-color: #333;
  overflow: hidden;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}
nav ul li {
  float: left;
}
nav ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
nav ul li a:hover {
  background-color: #111;
}
nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
}
nav ul ul li {
  float: none;
  position: relative;
}
nav ul ul li a {
  padding: 10px 16px;
  color: #fff;
}
nav ul ul li a:hover {
  background-color: #555;
}
nav ul li:hover > ul {
  display:inherit;
} 

上述代码实现了一个基础的下拉式导航栏。在HTML中，可以按如下方式调用：

<!--HTML代码-->
<nav>
  <ul>
    <li><a href="#">菜单1</a></li>
    <li><a href="#">菜单2</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="#">菜单3</a></li>
  </ul>
</nav> 

在CSS中，设置nav的背景色、overflow属性；设置ul的margin、padding和position属性；设置ul li a的基本样式和hover状态；设置ul ul的display和position属性；设置ul ul li的位置和样式；设置li:hover > ul的display属性，使得hover时下拉菜单显示。

使用CSS下拉式导航栏后，用户可以更加方便地进行网站内部跳转，网站也显得更加专业，为用户提供更好的使用体验。