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