我正在嘗試創建一個相對于父級位置下降的擴展串列。
我目前有絕對的位置，串列排列不正確。
當我將它切換到相對定位時，我收到了我想要的結果，但我的串列上有一個奇怪的空間，這就是我得到的
我想要的結果沒有空間
是否可以保留定位但洗掉它創建的空間？
多謝你們
這是我的代碼：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background-image: url(images/background.png);
}
nav {
width: 250px;
position: absolute;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.25);
border-radius: 10px;
box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.4);
}
nav ul {
position: relative;
list-style-type: none;
}
nav ul li p {
display: flex;
align-items: center;
font-family: arial;
font-size: 1.1em;
text-decoration: none;
text-transform: capitalize;
color: white;
padding: 10px 30px;
height: 50px;
transition: .5s ease;
}
nav ul li p:hover {
background: rgba(0, 0, 0, 0.5);
color: white;
}
nav ul ul {
position: absolute;
left: 250px;
width: 200px;
top: 0;
background: rgba(75, 136, 162, 0.9);
border-radius: 5px;
box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.4);
display: none;
}
nav ul span {
position: absolute;
right: 20px;
font-size: 1.5em;
}
nav ul .dropdown {
position relative;
}
nav ul .dropdown:hover>ul {
display: inline-block;
}
nav ul .dropdown-two ul {
position: relative;
left: 200px;
cursor: pointer;
}
nav ul .dropdown-two:hover ul {
display: inline-block;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="master.css">
<title></title>
</head>
<body>
<nav>
<ul class="">
<li class="dropdown">
<p>Frozen Food<span>›</span></p>
<ul>
<li>
<p>Hamburger Patties</p>
</li>
<li class="dropdown-two">
<p>Fish Fingers<span>›</span></p>
<ul class="">
<li>
<p>Fish Fingers (500 Grams)</p>
</li>
<li>
<p>Fish Fingers (1000 Grams)</p>
</li>
</ul>
</li>
</li>
<li>
<p>Shelled Prawns</p>
</li>
<li class="dropdown-two">
<p>Tub Ice Cream<span>›</span></p>
<ul class="">
<li>
<p>Tub Ice Cream (1 Litre)</p>
</li>
<li>
<p>Tub Ice Cream (2 Litre)</p>
</li>
</ul>
</li>
</ul>
<li>
<p>Fresh Food</p>
</li>
<li>
<p>Beverages</p>
</li>
<li>
<p>Home Health</p>
</li>
<li>
<p>Pet Food</p>
</li>
</ul>
</nav>
</body>
</html>*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
background-image: url(images/background.png);
}
nav {
width: 250px;
position: absolute;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.25);
border-radius: 10px;
box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.4);
}
nav ul {
position: relative;
list-style-type: none;
}
nav ul li p {
display: flex;
align-items: center;
font-family: arial;
font-size: 1.1em;
text-decoration: none;
text-transform: capitalize;
color: white;
padding: 10px 30px;
height: 50px;
transition: .5s ease;
}
nav ul li p:hover {
background: rgba(0, 0, 0, 0.5);
color: white;
}
nav ul ul {
position:absolute;
left: 250px;
width: 200px;
top: 0;
background: rgba(75, 136, 162, 0.9);
border-radius: 5px;
box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.4);
display: none;
}
nav ul span {
position: absolute;
right: 20px;
font-size: 1.5em;
}
nav ul .dropdown {
position relative;
}
nav ul .dropdown:hover > ul {
display: inline-block;
}
nav ul .dropdown-two ul{
position: relative;
left: 200px;
cursor: pointer;
}
nav ul .dropdown-two:hover ul {
display: inline-block;
}
uj5u.com熱心網友回復：
讓你的dropdown-two親戚和從你的親戚中洗掉dropdown-two ul并給它前 100%：
顯示代碼片段
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background-image: url(images/background.png);
}
nav {
width: 250px;
position: absolute;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.25);
border-radius: 10px;
box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.4);
}
nav ul {
position: relative;
list-style-type: none;
}
nav ul li p {
display: flex;
align-items: center;
font-family: arial;
font-size: 1.1em;
text-decoration: none;
text-transform: capitalize;
color: white;
padding: 10px 30px;
height: 50px;
transition: .5s ease;
}
nav ul li p:hover {
background: rgba(0, 0, 0, 0.5);
color: white;
}
nav ul ul {
position: absolute;
left: 250px;
width: 200px;
top: 0;
background: rgba(75, 136, 162, 0.9);
border-radius: 5px;
box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.4);
display: none;
}
nav ul span {
position: absolute;
right: 20px;
font-size: 1.5em;
}
nav .dropdown-two {
position: relative;
}
nav ul .dropdown:hover>ul {
display: block;
}
nav ul .dropdown-two ul {
top: 100%;
left: 200px;
cursor: pointer;
}
nav ul .dropdown-two:hover ul {
display: inline-block;
}<nav>
<ul class="">
<li class="dropdown">
<p>Frozen Food<span>›</span></p>
<ul>
<li>
<p>Hamburger Patties</p>
</li>
<li class="dropdown-two">
<p>Fish Fingers<span>›</span></p>
<ul class="">
<li>
<p>Fish Fingers (500 Grams)</p>
</li>
<li>
<p>Fish Fingers (1000 Grams)</p>
</li>
</ul>
</li>
<li>
<p>Shelled Prawns</p>
</li>
<li class="dropdown-two">
<p>Tub Ice Cream<span>›</span></p>
<ul class="">
<li>
<p>Tub Ice Cream (1 Litre)</p>
</li>
<li>
<p>Tub Ice Cream (2 Litre)</p>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p>Fresh Food</p>
</li>
<li>
<p>Beverages</p>
</li>
<li>
<p>Home Health</p>
</li>
<li>
<p>Pet Food</p>
</li>
</ul>
</nav>順便說一句，我還修復了你的 html - 你在錯誤的位置關閉了 li
也不確定為什么要將選單放置在您懸停的專案下，因為您無法將滑鼠懸停在該幻燈片上，并且如果您的第二個選單沒有到達您在主選單中懸停的專案，您也會遇到同樣的問題當您嘗試將滑鼠從 li 移到子選單時，它會消失。
這就是我會做的事情 - 帶來更好的用戶體驗
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background-image: url(images/background.png);
}
nav {
width: 250px;
position: absolute;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.25);
border-radius: 10px;
box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.4);
}
nav ul {
list-style-type: none;
}
nav li {
position: relative;
}
nav ul li p {
display: flex;
align-items: center;
font-family: arial;
font-size: 1.1em;
text-decoration: none;
text-transform: capitalize;
color: white;
padding: 10px 30px;
height: 50px;
transition: .5s ease;
}
nav ul li p:hover {
background: rgba(0, 0, 0, 0.5);
color: white;
}
nav ul ul {
position: absolute;
left: 250px;
width: 200px;
top: 0;
background: rgba(75, 136, 162, 0.9);
border-radius: 5px;
box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.4);
display: none;
}
nav ul span {
position: absolute;
right: 20px;
font-size: 1.5em;
}
nav ul .dropdown:hover>ul {
display: block;
}
nav ul .dropdown-two ul {
left: 200px;
cursor: pointer;
}
nav ul .dropdown-two:hover ul {
display: inline-block;
}<nav>
<ul class="">
<li class="dropdown">
<p>Frozen Food<span>›</span></p>
<ul>
<li>
<p>Hamburger Patties</p>
</li>
<li class="dropdown-two">
<p>Fish Fingers<span>›</span></p>
<ul class="">
<li>
<p>Fish Fingers (500 Grams)</p>
</li>
<li>
<p>Fish Fingers (1000 Grams)</p>
</li>
</ul>
</li>
<li>
<p>Shelled Prawns</p>
</li>
<li class="dropdown-two">
<p>Tub Ice Cream<span>›</span></p>
<ul class="">
<li>
<p>Tub Ice Cream (1 Litre)</p>
</li>
<li>
<p>Tub Ice Cream (2 Litre)</p>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p>Fresh Food</p>
</li>
<li>
<p>Beverages</p>
</li>
<li>
<p>Home Health</p>
</li>
<li>
<p>Pet Food</p>
</li>
</ul>
</nav>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/459636.html