排列父項目下拉項目

Question

我試圖創建一個菜單欄，當鼠標懸停在項目上時有一個下拉菜單。到目前爲止，除了最後的排隊以外，所有事情都應該如此。不是直接在父項下面排列下拉列表，而是在最左邊的項目中將每一列放在同一個點上。

This一個出現在它應該在的地方。但是this和下一個仍然會出現在第一個所在的位置。

我試圖解決這個混亂的內部下拉項目的位置，也嘗試使用ul而不是一個div。

CSS：

/*MENU*/ 
ul.menu 
{ 
    margin: 0 0 5px; 
    padding: 0; 
    text-align: right; 
} 
ul.menu li 
{ 
    display: inline; 
    text-align: center; 
    list-style: none; 
} 
ul.menu li a 
{ 
    font-size: 1.1em; 
    font-weight: 600; 
    color: #fff; 
    text-decoration: none; 
    background: #0065BD; 
    padding: 5px 15px; 
} 
ul.menu li a:hover 
{ 
    background-color: #005299; 
} 

ul.menu div { 
    position: absolute; 
    visibility: hidden; 
    margin-top: 5px; 
    padding: 0; 
    border: solid 1px #A4A4A4; 
    background: #fff; 
    text-align: left; 
} 

ul.menu div a { 
    position: relative; 
    left: 0px; 
    display: block; 
    margin: 0; 
    padding: 5px 15px; 
    width: auto; 
    white-space: nowrap; 
    background: #005299; 
} 

ul.menu div a:hover { 
    background: #80B2DE; 
} 

VIEW：

<ul class="menu"> 
    <li> 
     <a href="/Application/Index" onmouseover="openDD('appDD')" onmouseout="closeTime()">Applications</a> 
     <div id="appDD" onmouseover="cancelClose()" onmouseout="closeTime()"> 
      @Html.ActionLink("View Applications", "Index", "Application") 
      @Html.ActionLink("Add Application", "Create", "Application") 
     </div> 
    </li> 
    <li> 
     <a href="/Report/Index" onmouseover="openDD('repDD')" onmouseout="closeTime()">Reports</a> 
     <div id="repDD" onmouseover="cancelClose()" onmouseout="closeTime()"> 
      @Html.ActionLink("View Reports", "Index", "Report") 
      @Html.ActionLink("Add Report", "Create", "Report") 
     </div> 
    </li> 
    <li> 
     <a href="/Parameter/Index" onmouseover="openDD('parDD')" onmouseout="closeTime()">Parameters</a> 
     <div id="parDD" onmouseover="cancelClose()" onmouseout="closeTime()"> 
      @Html.ActionLink("View Parameters", "Index", "Parameter") 
      @Html.ActionLink("Add Parameters", "Create", "Parameter") 
     </div> 
    </li> 
    <li>@Html.ActionLink("Admin", "Users", "Home")</li> 
</ul> 

的Javascript：用於打開和關閉下拉。

var timeout = 100; 
var closetimer = 0; 
var ddItem = 0; 

function openDD(id) { 
    cancelClose(); 
    closeDD(); 

    ddItem = document.getElementById(id); 
    ddItem.style.visibility = 'visible'; 
} 

function closeDD() { 
    if (ddItem) { 
     ddItem.style.visibility = 'hidden'; 
    } 
} 

function closeTime() { 
    closetimer = window.setTimeout(closeDD, timeout); 
} 

function cancelClose() { 
    if (closetimer) { 
     window.clearTimeout(closetimer); 
     closetimer = 0; 
    } 
} 

document.onclick = closeDD; 

的問題是，什麼是不正確或者需要爲了得到下拉到線直接了其主列表項目被添加？另外，CSS不是我的專長，所以請讓我知道是否有更好的方法來做這些事情。

Answer 1

正如丹的回答中所提到的，您需要您的position: absolute在position: relative之內。 看看這個小提琴：https://jsfiddle.net/p8j8zehs/

或者看看這個片段：

.menu-container { 
 
    display: relative; 
 
    float: left; 
 
    width: 150px; 
 
} 
 

 
.menu-container:hover ul.menu { 
 
    display: block; 
 
} 
 
ul.menu { 
 
    display: none; 
 
    position: absolute; 
 
}

<div> 
 
    <div class="menu-container"> 
 
    <span>Menu 0</span> 
 
    <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     <li>Item 4</li> 
 
    </ul> 
 
    </div> 
 
    <div class="menu-container"> 
 
    <span>Menu 1</span> 
 
    <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     <li>Item 4</li> 
 
    </ul> 
 
    </div> 
 
    <div class="menu-container"> 
 
    <span>Menu 2</span> 
 
    <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     <li>Item 4</li> 
 
    </ul> 
 
    </div> 
 
    <div class="menu-container"> 
 
    <span>Menu 3</span> 
 
    <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     <li>Item 4</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

需要position: relative和display: inline-block上的項目。下拉菜單上的position: absolute表示它正在尋找DOM的某個位置以進行定位。