2

我编写了这段代码来创建简单的 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 或尝试我想到的任何其他想法，但没有成功。有什么建议我该如何解决？

4

6 回答 6

3

首先，欢迎来到 Web 开发的精彩世界。根据您使用内联样式、li作为顶级容器以及尝试使用 Javascript 进行简单菜单显示/隐藏的情况，我可以告诉您，您还是个新手。不管！这是一个学习过程，Web 开发很有趣。:)

首先，对于你想要的，你可以只通过 CSS 来做到这一点，而不需要position:absolute在你的菜单项中或者任何类似的东西。这是一个更干净的菜单显示的工作示例：

jsFiddle 示例

我对学习过程的建议：

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

祝你好运！

于 2013-09-06T22:06:40.840 回答
2

CSS

    

    .dropdown li{
    向左飘浮;
    宽度：240px；
    位置：相对；
    }

    .dropdown ol{
    位置：绝对；
    左：-9999px；/* 在不需要时隐藏屏幕外（这比
    显示：无；）*/
    }

    .dropdown li:hover ol{ /* 悬停时显示下拉菜单 */
    左：0；/* 在需要时返回屏幕 */
    }

HTML

    <ul 类="下拉">
    <li>
    <a href="#" >您的链接</a>
    <ol>
    <li><a href="#">你的链接 1 </a> </li>
    <li><a href="#">你的链接 2 </a> </li>
    </ol>
    </li></ul>

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

于 2014-01-30T22:15:03.293 回答
1

look在这个Fiddle上拿一个。也许这就是你要找的。它只使用 HTML 和 CSS。

于 2013-09-06T22:09:12.100 回答
0

#rankSubMenu可能是 0px 高，尝试添加一些高度，你也可以通过使用来免费做这个 js:hover

于 2013-09-06T21:52:58.267 回答
0

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

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

于 2013-09-06T21:57:46.400 回答
0

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

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

于 2013-09-06T22:06:15.083 回答