Superfish HTML 和 CSS 不显示菜单

Question

我之前发布了一个我认为过于具体的问题。让我用我遇到的一个普遍问题来改写它。

我有一个链接到 css 文件的 html 文件。我在同一目录的 js 文件夹中有 superfish.js。菜单不出现。

我做了什么：

1. 下载superfish.js并放到js文件夹中
2. 复制 superfish.css 文件并将其放入我的 .css 文件中
3. 在我的html文件顶部加载js

这就是我应该做的所有事情。我会说这似乎是一个 CSS 问题，因为当我更改时

.sf-menu ul {
    position:  absolute;
    top:       -999em;
    width:     10em; /* left offset of submenus need to match (see below) */
}

到

.sf-menu ul {
    position:  absolute;
    top:       0em;
    width:     10em; /* left offset of submenus need to match (see below) */
}

菜单出现在左上角。我从 superfish 复制了水平导航 CSS，它仍然只水平显示。那么我是否错过了其他一些基本步骤？

HTML：http://smart-art.org/cadop/index.html

CSS：http://smart-art.org/cadop/oneColFixCtr.css

index.html 显示左上角的菜单，这是因为我更改了 CSS 以使 -999em 变为 0em ...所以我假设 JS 工作正常，但我完全感到困惑。

我希望这对我来说不是太具体，因为我正在使用 Dreamweaver。我在另一个文件中单击了一个带有 CSS 的列布局。从Superfish网站复制CSS，并将JS文件放在文件夹中。

有什么帮助吗？

Answer 1

首先，一些建议：

• 在开发页面时，请以小块的形式添加 JavaScript 和 CSS，这样在您了解发生了什么之前，您的页面/网站就不会增长到无法控制的大小。
• 添加新内容时，有时在标签中添加 CSS 会很有帮助。然后确保问题不是由链接问题引起的。

---

现在回答你的问题。根据您的页面，您的 HTML 看起来很混乱。我所做的只是从Superfish v1.4.8 example 页面复制 HTML 并替换您的菜单。

您的菜单似乎缺少许多必要的菜单类。例如，查看您的顶部菜单元素与示例之间的区别：

您的代码：<ul class="sf-menu">

示例代码：<ul id="sample-menu-1" class="sf-menu sf-js-enabled sf-shadow">

我还使用.sf-menu ul 的原始 CSS。

    .sf-menu ul {
        position: absolute;
        top:      -999em;
        width:    10em; /* left offset of submenus need to match (see below) */
    }

工作示例： http://jsfiddle.net/HtBUZ/

修复页面的操作项

1. 使用 Superfish v1.4.8 example 更正您的 HTML。

2. 确保您的脚本正确。

   1. 您的页面缺少 JQuery。

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
      

   2. 您的页面错误地链接了hoverIntent.js。
3. 将您的 CSS 恢复为 .sf-menu ul 的原始 -999em 值。