css - 使用父菜单排列下拉项

标签 css asp.net-mvc-4

我正在尝试创建一个菜单栏,当将鼠标悬停在该元素上时,该菜单栏会出现下拉菜单。到目前为止,除了最后的排队外,一切正常。不是将下拉菜单直接排列在父项下方,而是将每个下拉菜单排列在最左侧元素的同一位置。

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 不是我的强项,所以如果有更好的方法,请告诉我。

最佳答案

正如 Dan 的回答中提到的,您需要将 position: absolute 放在 position: relative 中。 看看这个 fiddle :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>

关于css - 使用父菜单排列下拉项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36720073/

相关文章:

css - WordPress 中的导航不一致

css - 哪个加载速度更快 @font-face 或链接

javascript - 避免元素跳到页面底部的正确方法?

html - 自动调整具有固定图像的容器大小,其中文本应填充间隙

asp.net-mvc-4 - MVC 4 WebGrid 使用按钮编辑行

css - 谷歌地图 API 自动完成下拉样式,:focus does not work when navigating with arrows

c# - 带有 BeginCollectionItem 的 MVC 5 动态行

c# - 无法从 Azure 网站上的 MVC4 应用程序连接到 MySQL

asp.net-mvc-4 - 添加引用列表中缺少 System.Web.Http.Description

c# - 使用 DynamoDB 的自定义 session 状态管理