Question

我已经编写了这段代码来创建简单的CSS和Javascript下拉菜单。

HTML：

<li><a href="#" onmouseover="showRanksSubmenu()" onmouseout="hideRanksSubmenu()">XYZ</a>
    <ul id="rankSubMenu" onmouseover="showRanksSubmenu()" onmouseout="hideRanksSubmenu()">
        <li><a href="#" style="position: absolute; top: 12px;">AAA</a></li>
        <li><a href="#" style="position: absolute; top: 50px;">BBB</a></li>
        <li><a href="#" style="position: absolute; top: 88px;">CCC</a></li>
    </ul>
</li>

CSS：

#rankSubMenu {
     display: none; 
     position: absolute; 
     bottom: 10px;
     left: 278px;
}

JS：

function showRanksSubmenu() {
    document.getElementById('rankSubMenu').style.display = 'block';
}

function hideRanksSubmenu() {
    document.getElementById('rankSubMenu').style.display = 'none';
}

菜单项当然有一些高度，背景和其他东西，使它们看起来像按钮。问题是，这些按钮之间有一些空白区域（如几个像素），当用户在那里停止鼠标光标时，菜单消失（事实上菜单总是这样做，除非你快速移动光标）。我试图将整个区域定义为div或尝试我想到的任何其他想法，但没有成功。有什么建议我可以解决这个问题吗？

Answer 1

首先，欢迎来到精彩的网络开发世界。根据您对内联样式的使用，li作为顶级容器，并尝试使用Javascript进行简单的菜单显示/隐藏，我可以告诉您这是一个非常新的。不管！它是一个学习过程，网络开发很有趣。：）

首先，根据您的需要，您只能通过CSS执行此操作，而无需在菜单项中使用position:absolute或类似的任何事情。这是一个清洁菜单显示的工作示例：

jsFiddle example

我对学习过程的建议：

对外部CSS表格感到满意，使用内联样式非常古老，而且很难维护
了解样式时类对ID的好处;很少（从不？）你是否需要使用ID来设置样式，并且通常首选类，因为你可以将它应用于多个元素
熟悉正确的语义标记;例如，li不应该是顶级容器，如果有子列表或其他内容，则不应该是另一个ul的容器
学习外部JS事件处理程序;在HTML中使用内联onwhatever处理程序是另一种非常古老的方法，并且再次使维护变得非常困难

祝你好运！

Answer 2

CSS

    

    .dropdown li{
    float:left;
    width: 240px;
    position:relative;
    }

    .dropdown ol{
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than 
    display:none;) */
    }

    .dropdown li:hover ol{ /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
    }

HTML


    <ul class="dropdown"> 
    <li>
    <a href="#" >Your Link</a>
    <ol>
    <li><a href="#"> Your Link 1 </a> </li>
    <li><a href="#"> Your Link 2 </a> </li>
    </ol>
    </li></ul>

你还需要什么呢？有没有理由使用javascript来创建它？

Answer 3

在此Fiddle处look。也许这就是你要找的东西。它只使用HTML和CSS。

Answer 4

#rankSubMenu可能是0px高，尝试添加一些高度，也可以使用:hover

自由地执行此操作

Answer 5

我的猜测是将你的锚标记设置为显示块。如果一个锚标签不是一个块，它将忽略一些css属性，宽度和高度是两个主要属性，所以你的点击只是文本。

另一个可能的原因是进入的子菜单部分覆盖了链接（请检查您的检查员，看看它覆盖的区域）。

Answer 6

如果您将高度设置为隐藏溢出的原始项目的高度，然后将悬停设置高度设置为自动

HTML 的

<nav class="navigation">
   <ul>
      <li><a href="#menu">Menu</a></li>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
   </ul>
</nav>

CSS

.navigation {
    height: 20px;
    overflow: hidden;
}

.navigation {
    height: auto;
}

不需要javascript

纯CSS＆amp; JS下拉菜单 - onmouseover问题

6 个答案: