下拉栏浮动框的向右/向下。整个网格将鼠标悬停在其上方

Question

该元素未与其他元素对齐。我不明白为什么。如果我将鼠标悬停在链接上，其他问题将导致网格抖动（移动）。电网应该以某种方式稳定吗？

.main-content {
  grid-area: main;
}

.menu {
  grid-area: menu;
  padding-right: 5%;
}

.menu * {
  color: black;
  text-decoration: none;
}

.menu ul {
  text-align: right;
}

.menu li {
  list-style-type: none;
  display: inline;
  padding: 15px;
}

.grid-main div {
  border: 1px solid green;
}

.grid-main {
  display: grid;
  border: 1px solid red;
  grid-gap: 5px;
  grid-template-columns: 1fr, 1fr, 8fr, 1fr, 1fr;
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas: "logo menu menu menu signin" ". main main signup signup" ". main main signup signup" ". main main signup signup";
}

And the drop down list is as styled as : .language {
  position: fixed;
  display: inline-block;
  cursor: pointer;
}

.dropdown-menu {
  display: none;
  position: relative;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-menu a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  text-align: left;
  display: block;
}

.dropdown-menu a:hover {
  background-color: #f1f1f1;
}

.language:hover .dropdown-menu {
  position: fixed;
  display: block;
}

<div class="menu">
  <ul>
    <li class="nav-item">
      <a class="nav-link" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#about">About Us</a>
    </li>
    <li class="nav-item ">
      <a class="nav-link" href="#features">What's Special?</a>
    </li>
    <li class="nav-item ">
      <a class="nav-link" href="#screenshot">Opportunities</a>
    </li>
    <li class="nav-item ">
      <a class="nav-link" href="#pricing">Cost's</a>
    </li>
    <li class="nav-item ">
      <a class="nav-link" href="#team">Vacancies</a>
    </li>
    <li class="nav-item ">
      <a class="nav-link" href="#contact"> Help &amp; Support </a>
    </li>
    <li class="language ">
      <a class="nav-link dropdown-toggle" aria-haspopup="true" data-toggle="dropdown" aria-expanded="false">
        <span class="flag-icon flag-icon-us"> </span> English</a>
      <section class="dropdown-menu ">
        <a class="dropdown-item" href="#fr">
          <span class="flag-icon flag-icon-fr"> </span> French</a>
        <a class="dropdown-item" href="#it">
          <span class="flag-icon flag-icon-it"> </span> Italian</a>
        <a class="dropdown-item" href="#ru">
          <span class="flag-icon flag-icon-ru"> </span> Russian</a>
        <a class="dropdown-item" href="#de">
          <span class="flag-icon flag-icon-de"> </span> Deutch</a>
        <a class="dropdown-item" href="#de">
          <span class="flag-icon flag-icon-cz"> </span> Česká republika</a>
        <a class="dropdown-item" href="../lv/index.html">
          <span class="flag-icon flag-icon-lv"> </span> Latviešu</a>
      </section>
    </li>
  </ul>
</div>

我希望所有代码以尽可能少的代码排成一行。

当前，它正在网格外滑动。而且我认为使用下面的网格不可能做到这一点：

enter image description here

Answer 1

将right: 20px;添加到了.language:hover .dropdown-menu

.main-content {
  grid-area: main;
}

.menu {
  grid-area: menu;
  padding-right: 5%;
}

.menu * {
  color: black;
  text-decoration: none;
}

.menu ul {
  text-align: right;
}

.menu li {
  list-style-type: none;
  display: inline;
  padding: 15px;
}

.grid-main div {
  border: 1px solid green;
}

.grid-main {
  display: grid;
  border: 1px solid red;
  grid-gap: 5px;
  grid-template-columns: 1fr, 1fr, 8fr, 1fr, 1fr;
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas: "logo menu menu menu signin" ". main main signup signup" ". main main signup signup" ". main main signup signup";
}

And the drop down list is as styled as: .language {
  position: fixed;
  display: inline-block;
  cursor: pointer;
}

.dropdown-menu {
  display: none;
  position: relative;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-menu a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  text-align: left;
  display: block;
}

.dropdown-menu a:hover {
  background-color: #f1f1f1;
}

.language:hover .dropdown-menu {
  position: fixed;
  display: block;
  right: 20px;
}

<div class="menu">
  <ul>
    <li class="nav-item">
      <a class="nav-link" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#about">About Us</a>
    </li>
    <li class="nav-item ">
      <a class="nav-link" href="#features">What's Special?</a>
    </li>
    <li class="nav-item ">
      <a class="nav-link" href="#screenshot">Opportunities</a>
    </li>
    <li class="nav-item ">
      <a class="nav-link" href="#pricing">Cost's</a>
    </li>
    <li class="nav-item ">
      <a class="nav-link" href="#team">Vacancies</a>
    </li>
    <li class="nav-item ">
      <a class="nav-link" href="#contact"> Help &amp; Support </a>
    </li>
    <li class="language ">
      <a class="nav-link dropdown-toggle" aria-haspopup="true" data-toggle="dropdown" aria-expanded="false">
        <span class="flag-icon flag-icon-us"> </span> English</a>
      <section class="dropdown-menu ">
        <a class="dropdown-item" href="#fr">
          <span class="flag-icon flag-icon-fr"> </span> French</a>
        <a class="dropdown-item" href="#it">
          <span class="flag-icon flag-icon-it"> </span> Italian</a>
        <a class="dropdown-item" href="#ru">
          <span class="flag-icon flag-icon-ru"> </span> Russian</a>
        <a class="dropdown-item" href="#de">
          <span class="flag-icon flag-icon-de"> </span> Deutch</a>
        <a class="dropdown-item" href="#de">
          <span class="flag-icon flag-icon-cz"> </span> Česká republika</a>
        <a class="dropdown-item" href="../lv/index.html">
          <span class="flag-icon flag-icon-lv"> </span> Latviešu</a>
      </section>
    </li>
  </ul>
</div>

Answer 2

希望这可以解决您正在处理的问题。而且我只添加更改的css。

.language {
    position: relative;
}
.dropdown-menu {
    display: none;
    position: absolute;

    min-width: 160px;

    right: 0;
    max-width: 160px;
    height: 100%;
}
 .menu ul {
    position:relative;
}

下面是codepen.io

的链接

Answer 3

这实际上解决了我的问题。修复仍然是由于定位。发生的问题是因为其他元素的位置不正确，因此网页网格在悬停时闪烁。

   .language {
        cursor: pointer;
        position: relative;
        /*Needs to be relative, as this then will set the dropdown-menu to absolute and will display the content correctly */
    }

    .dropdown-menu {
        display: none;
        position: absolute;
        /*Absolute is needed so that this is displayed correctly under the English choise. */
        background-color: #f9f9f9;
        min-width: 175px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    .dropdown-menu a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        text-align: left;
        display: block;
    }

.dropdown-menu a:hover {
    background-color: #f1f1f1;
}

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