1 回答

TA貢獻1891條經驗 獲得超3個贊
內容被推送是因為您的下拉菜單位于您的 Navbar-dropdown 中。懸停時,您將顯示下拉內容,并且由于它占用垂直空間,因此會推送內容。
為避免這種情況,您必須將下拉內容位置設置為absolute。 不要忘記將 Navbar-dropdown 的位置設置為相對位置。
.Navbar {
display: flex;
height: 10vh;
background-color: lightgray;
justify-content: space-between;
align-items: center;
}
.Navbar-menu {
display: flex;
}
.Navbar-dropdown {
display: inline-flex;
flex-wrap: wrap;
flex-direction: column;
position: relative;
border: 1px solid red;
}
.Navbar-dropdownMenu {
background-color: lightgray;
display: none;
position: absolute;
top: 20px;
right: 0;
}
.Navbar-dropdown:hover .Navbar-dropdownMenu {
display: flex;
flex-direction: column;
}
<nav class="Navbar">
<a class="Navbar-brand Navbar-link" href="./">Brand</a>
<div class="Navbar-menu">
<a class="Navbar-link Text-uppercase" href="./">Link 1</a>
<a class="Navbar-link Text-uppercase" href="./">Link 2</a>
<div class="Navbar-dropdown">
<button class="Navbar-dropdownBtn">Kieli</button>
<div class="Navbar-dropdownMenu">
<a class="Navbar-link" href="../en-fi/">Suomi</a>
<a class="Navbar-link" href="../en-gb/">Englanti</a>
</div>
</div>
</div>
</nav>
- 1 回答
- 0 關注
- 189 瀏覽
添加回答
舉報