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

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> 

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

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

在此处输入图片说明

Answer 1

right: 20px;添加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;
}