3

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

我有一个链接到 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文件放在文件夹中。

有什么帮助吗？

4

1 回答 1

1

首先，一些建议：

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

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

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

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

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

我还将原始 CSS 用于.sf-menu ul.

    .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 示例更正您的 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 恢复-999em为.sf-menu ul.
于 2013-01-03T01:26:54.173 回答