HTML中如何设置主导航栏下拉菜单平时是隐藏的，并且鼠标移至主导航栏是文字为黑色且有下划线

在HTML中，要设置主导航栏下的下拉菜单平时是隐藏的，通常会使用CSS来控制样式，并用JavaScript或jQuery来响应鼠标事件。具体步骤如下：

1. 使用CSS设置下拉菜单默认为隐藏状态。可以设置`display`属性为`none`，或者使用`visibility`属性设置为`hidden`。

2. 设置导航栏的基本样式，使得鼠标移至时文字变为黑色并添加下划线，可以通过`:hover`伪类来实现。

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

HTML部分：

<nav>
  <ul class="navbar">
    <li><a href="#">首页</a></li>
    <li class="dropdown">
      <a href="#">产品</a>
      <ul class="dropdown-content">
        <li><a href="#">产品A</a></li>
        <li><a href="#">产品B</a></li>
        <li><a href="#">产品C</a></li>
      </ul>
    </li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系方式</a></li>
  </ul>
</nav>

CSS部分：

/* 导航栏样式 */
.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

.navbar > li {
  float: left;
}

.navbar > li > a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 鼠标悬停时改变文字颜色并添加下划线 */
.navbar > li > a:hover {
  color: black;
  text-decoration: underline;
}

/* 下拉菜单默认隐藏 */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* 鼠标悬停时显示下拉菜单 */
.dropdown:hover .dropdown-content {
  display: block;
}

/* 下拉菜单内的链接样式 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* 鼠标悬停时改变下拉菜单内链接颜色 */
.dropdown-content a:hover {
  background-color: #f1f1f1;
}

在这个示例中，`.dropdown-content` 类的 `display` 属性默认设置为 `none`，这使得下拉菜单在没有鼠标悬停时是隐藏的。当鼠标悬停在具有 `.dropdown` 类的 `<li>` 元素上时，`.dropdown-content` 类的 `display` 属性会改变为 `block`，这样下拉菜单就会显示出来。同时，通过 `.navbar > li > a:hover` 规则，可以使得鼠标悬停在导航链接上时，文字变为黑色并添加下划线。