下拉菜單不對齊（純CSS）

Question

無法將下拉菜單與“服務”鏈接對齊。 每當我 hover 到“服務”鏈接時，它都會粘在左邊。 我曾嘗試在 nav ul 上使用 function“左”，它有點做了工作，但每當我最小化 window 時它都沒有響應。它只適用於我更改它的 window 尺寸。此時，我在這個問題上讓我摸不着頭腦。

 /* Basic */ *{ margin: 0; padding: 0; box-sizing: border-box; } body{ font-family: 'Acme', sans-serif; background: white; line-height: 1.6; } ul{ list-style: none; } a{ text-decoration: none; } /* Navbar */.navbar{ display: flex; background: #004C66; align-items: center; justify-content: space-between; width: 100%; position: fixed; padding: 0 30px; } /* To Keep Control of the Logo */.navbar.logo img{ width: 100%; margin-top: 10px; } /* To Make the Desktop Nav Buttons Inline */.navbar ul li{ display: inline; }.navbar ul li.nav-link{ padding: 10px 25px; color: #fff; font-size: 30px; transition-duration: 500ms; }.navbar.nav-link:hover{ color: black; } /* NAVBAR DROP DOWNS */ /* Hide Dropdowns By Default */ nav ul ul { display: none; position: absolute; top: auto; /* the height of the main nav */ text-align: center; justify-items: center; border-radius: 10%; } /* Display Dropdowns on Hover */ nav ul li:hover > ul { display:flex; background-color: teal; flex-direction: column; } /* Fisrt Tier Dropdown */ nav ul ul li { width:auto; top: 0px; float:none; display:list-item; position: relative; } /* Second, Third and more Tiers */ nav ul ul ul li { position: relative; }

 <header class="navbar"> <a href="" class="logo"><img src="/img/logoS.png" alt=""></a> <nav class="desktop-view"> <ul> <li><a class="nav-link" href="#">Home</a></li> <li><a class="nav-link services" href="#">Services</a> <!-- First Tier Drop Down --> <ul> <li><a class="nav-link" href="#">Tile</a></li> <li><a class="nav-link"href="#">Mexican Tile</a></li> <li><a class="nav-link"href="#">Marble Floor</a></li> <li><a class="nav-link"href="#">Shower Regrout</a></li> </ul> </li> <li><a class="nav-link" href="#">Contact</a></li> </ul> </nav> </header>

Answer 1

您將.navbar ul li position 設置為 relative

然后將下拉菜單移動到中間left: 50%和transform: translateX(-50%)

 /* Basic */ *{ margin: 0; padding: 0; box-sizing: border-box; } body{ font-family: 'Acme', sans-serif; background: white; line-height: 1.6; } ul{ list-style: none; } a{ text-decoration: none; } /* Navbar */.navbar{ display: flex; background: #004C66; align-items: center; justify-content: space-between; width: 100%; position: fixed; padding: 0 30px; } /* To Keep Control of the Logo */.navbar.logo img{ width: 100%; margin-top: 10px; } /* To Make the Desktop Nav Buttons Inline */.navbar ul li{ display: inline; position: relative; }.navbar ul li.nav-link{ padding: 10px 25px; color: #fff; font-size: 30px; transition-duration: 500ms; }.navbar.nav-link:hover{ color: black; } /* NAVBAR DROP DOWNS */ /* Hide Dropdowns By Default */ nav ul ul { display: none; position: absolute; text-align: center; border-radius: 10%; left: 50%; width: 300px; transform: translateX(-50%); } /* Display Dropdowns on Hover */ nav ul li:hover > ul { display:flex; background-color: teal; flex-direction: column; } /* Fisrt Tier Dropdown */ nav ul ul li { width:auto; top: 0px; float:none; display:list-item; position: relative; } /* Second, Third and more Tiers */ nav ul ul ul li { position: relative; }

 <header class="navbar"> <a href="" class="logo"><img src="/img/logoS.png" alt=""></a> <nav class="desktop-view"> <ul> <li><a class="nav-link" href="#">Home</a></li> <li><a class="nav-link services" href="#">Services</a> <!-- First Tier Drop Down --> <ul> <li><a class="nav-link" href="#">Tile</a></li> <li><a class="nav-link"href="#">Mexican Tile</a></li> <li><a class="nav-link"href="#">Marble Floor</a></li> <li><a class="nav-link"href="#">Shower Regrout</a></li> </ul> </li> <li><a class="nav-link" href="#">Contact</a></li> </ul> </nav> </header>

Answer 2

絕對定位的元素相對於第一個定位的父元素定位，因此具有position: absolute的 nav ul ul 將相對於具有 position 集合的第一個元素定位。

在這種情況下，要求下拉菜單與其父 li 對齊，因此給該元素position: relative

Answer 3

菜單欄截圖

如果您想要下拉菜單的這種外觀，請在您的 CSS 代碼中進行以下更改：

ul{   
       list-style: none;
       display: flex;
       position: relative;
       
     }