菜单栏不显示

如果您的徽标是.imgBarra，则无需添加媒体资源align-items: flex-start;

• display: flex;尚未设置任何属性。
• 如果要将其对齐到标题的左侧，则需要将该属性设置为container .barra。

基本上，如果设置align-items: flex-start;为徽标容器，它将对齐徽标容器内的所有子项，而不是徽标本身。

为了正确控制页眉的高度和对齐方式，您需要注意填充物并考虑其中的所有子项。

假设您的HTML是这样的：

<div class="barra>
    <div class="imgBarra">Logo</div>
    <ul>
        <li>
            <a href="...">Home</a>
        </li>
        <li>
            <a href="...">About</a>
        </li>
        <li>
            <a href="...">Contact</a>
        </li>
    </ul>
</div>

要具有总共110px的高度[30px（徽标）+ 40px（顶部20px +底部标题底部20px）+ 40px（顶部20px +底部底部链接20px）]，您的CSS应该如下所示：

.barra {
       position: relative;
       padding: 20px;
       display: flex;
       align-items: center; /* to align vertically in the center  all the children inside the header, so imgBarra and the li */
       justify-content: space-between; /* or any other property to align horizontally the content inside the header */
}

.imgBarra {
       width: 30px;
       height: 30px;
}

.barra ul li a {
      padding: 20px;
}

关于子菜单，让我们假设您的HTML看起来像这样，通过将鼠标悬停在“主页”上，用户应该会看到您的下拉菜单。

<div class="barra">
    <div class="imgBarra">Logo</div>
    <ul>
        <li class="hasDropdown">
          <a class="dropdownTrigger" href="#">Home</a>
            <div class="dropdown">
              <ul>
               <li>Submenu Item 1</li>
               <li>Submenu Item 2</li>
               <li>Submenu Item 3</li>
              </ul>
            </div>
          </li>
        <li>
          <a href="...">About</a>
        </li>
        <li>
          <a href="...">Contact</a>
        </li>
      </ul>
</div>

要触发并显示子菜单，您首先需要使用来隐藏下拉菜单，visibility:hidden;然后给出此CSS规则，该规则基本上说：“当悬停在“ Home”（由类标识dropdownTrigger）时，将下拉列表类更改为visiblity: visible;。

您的CSS应该如下所示：

.hasDropdown {
    position: relative;
}

.dropdown {
    visibility: hidden; /* Dropdown hidden by default */
    position: absolute /* You will position it relatively to its parent hasDropdown */
    top: 20px;
    left: 0;
    display: flex;
    align-items: flex-start;
}

.dropdownTrigger:hover .dropdown {
    visibility: visible;
}

正如您在下拉列表容器中看到的那样，我已经添加了属性display: flex;和align-items: flex-start;，因此.dropdown内的所有子代都将如左所述向左对齐。该属性align-items仅display: flex;在设置后才能工作。