如何直接在父標籤下移動下拉菜單？

我有一個菜單，有一個很好的下拉菜單和一切，但我在這裏唯一的問題是，我無法找到一種方法來移動這個該死的下拉只是一點點左邊，所以它直接在它的父標籤！！它總是在旁邊，我看到其他人的例子，當我在菜單選項卡之間添加填充時，它會做同樣的事情！也許是因爲那個填充？（我說的是這樣的：http://jsbin.com/gimilapiki/edit?html,css,output）如何直接在父標籤下移動下拉菜單？

所以，這裏是我的項目：https://codepen.io/anon/pen/gxdVdO?editors=1100

下面是一些代碼（因爲計算器迫使我）：

body {background-color: #E8E8E8;} 

ul {list-style: none;} 

li { 
    float: left; 
    background-color: white; 
} 

li:not(.search) {padding: 12px 20px 12px 20px;} 

li ul { 
    display: none; 
    position: absolute; 
    padding-left: 1px; 
    padding-top: 12px; 
} 

a { 
    text-decoration: none; 
    color: #5E5E5E; 
} 

li:not(.search):hover { 
    color: black; 
    background-color:#E3E3E3;; 
} 

ul li ul li { 
    float: none; 
    background-color: #E3E3E3; 
} 

ul li ul li:not(.search):hover {background-color: #D1D1D1;} 
li:hover > ul { 
    z-index: 289; 
    display: block; 
    padding: 0 10px 20 20px; 
} 

.search-input { 
     width: 150px; 
     height: 18px; 
     padding: 0 7px; 
     border: 1px solid grey; 
     border-radius: 10px; 
     border-bottom-right-radius: 0px; 
     border-top-right-radius: 0px; 
    } 

    .search-input:hover { 
     outline: none; 
     opacity:0.99; 
     cursor: pointer; 
     box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.05) inset; 
    } 
    input:focus {outline: none;} 
    #search-icon { 
     height: 18px; 
    } 
    .search { 
     padding-bottom: 10px; 
    } 

    form { 
     margin-top: 4px; 
    }

我很認真停留在這個簡單的問題上。添加填充左側或填充右側或頁邊空白什麼都不做，它隻影響標籤的垂直高度，沒有其他內容。我嘗試了一切，儘可能地進行了研究，沒有任何工作。請幫忙！！！

來源

2017-08-28 Grace Sawyer

ul > li{ 
    position: relative; 
} 
ul > li > ul{ 
    position: absolute; 
    top: 100%; 
    left: 0px; 
}

試着添加這個。

來源

2017-08-28 05:15:38 zynkn

這並不工作。你能解釋它是如何工作的嗎？我很困惑，謝謝！ –

@GraceSawyer我很抱歉...我不擅長英語，所以我無法解釋..我可以告訴你只搜索'relative'和'absolute'。 – zynkn

@GraceSawyer，那麼絕對的位置與父親的相對元素一起工作。所以前100％會將菜單移動到父li元素的確切末尾，並且將0保留到父元素的開始位置。希望澄清一點。 – Aslam

你可以添加一些簡單的像這樣

li ul { 
     display: none; 
     position: absolute; 
     padding-left: 1px; 
     margin-left: -10px; 
     padding-top: 12px; 
    }

我加入了margin-left: -10px;，我認爲它的工作原理

來源

2017-08-28 05:21:00

我聽說它通常不起作用，或者在其他論壇上通常不鼓勵，因爲我在考慮這個問題之前曾考慮過填充負數或邊距。不過，我嘗試了這一點，它的功能就像一個魅力。所以，我對這是不是一個好選擇非常矛盾，但它似乎是一個很好的解決方案。我會做更多的研究。謝謝。 –

只需添加位置relative.That將解決你的問題。

li ul { 
 
    display: none; 
 
    position: relative; 
 
    padding-left: 1px; 
 
    padding-top: 12px; 
 
    margin-right:100px; 
 
}

來源

2017-08-28 05:28:14

如何直接在父標籤下移動下拉菜單？

回答

相關問題