怎么给导航栏增加下拉，讲一下原理

给导航栏增加下拉菜单的原理是利用CSS中的伪类:hover和display属性来实现。

首先，需要在导航栏中添加一个带有下拉菜单的父元素。这个父元素可以是一个li标签或者是一个a标签，只要这个标签包含了下拉菜单即可。

接着，在CSS中设置这个父元素的display属性为"inline-block"或者"block"，并将下拉菜单的display属性设置为"none"，表示下拉菜单一开始是不可见的。

然后，使用:hover伪类来监听鼠标悬停在父元素上的事件，并设置下拉菜单的display属性为"block"，这样当鼠标悬停在父元素上时，下拉菜单就会显示出来。

下面是一个简单的示例代码：

HTML代码：

<ul>
  <li>首页</li>
  <li class="dropdown">产品
    <ul class="dropdown-menu">
      <li>产品1</li>
      <li>产品2</li>
      <li>产品3</li>
    </ul>
  </li>
  <li>关于我们</li>
</ul>

CSS代码：

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

li {
  display: inline-block;
  margin-right: 20px;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #fff;
  padding: 10px;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

在这个示例中，我们给包含下拉菜单的li标签添加了一个名为"dropdown"的class，然后使用CSS设置这个class的display属性为"inline-block"，并将下拉菜单的class为"dropdown-menu"的ul标签的display属性设置为"none"。

当鼠标悬停在带有"dropdown" class的li标签上时，我们使用:hover伪类来监听这个事件，并设置下拉菜单的display属性为"block"，这样下拉菜单就会显示出来了。