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;
}

查看：

<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: relative和display: inline-block。下拉列表中的position: absolute表示它正在进一步查找DOM，以便在某处定位自己。

Answer 2

正如Dan的回答所提到的，你需要position: absolute内的position: relative。看看这个小提琴：https://jsfiddle.net/p8j8zehs/

或者看看这个片段：

＆＃13;

.menu-container {
  display: relative;
  float: left;
  width: 150px;
}

.menu-container:hover ul.menu {
  display: block;
}
ul.menu {
  display: none;
  position: absolute;
}

＆＃13;

<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>

＆＃13;

使用父菜单排列下拉项目

2 个答案: