Menu not displaying with Superfish HTML and CSS

Question

I had posted what I guess was a too specific question earlier. Let me rephrase it with a general problem I am having.

I have one html file that is linked to a css file. I have superfish.js in a js folder in the same directory. The menu does not appear.

What I have done:

1. download superfish.js and place it in js folder
2. copy superfish.css file and place it in my .css file
3. load js at the top of my html file

Thats all i could find that I was supposed to do. I would say it seems like a CSS problem, because when I change

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

to

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

the menu appears in the top left. I copied the horizontal nav CSS from superfish and it still only displays horizontally. So have I missed some other basic step?

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

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

The index.html shows the menu at the top left, this is because I changed the CSS to make the -999em to 0em ... so I assume the JS is working, but I'm totally baffled.

I hope this isnt too specific to me as I am using Dreamweaver. I clicked one column layout with CSS in a different file. Copied the CSS from Superfish website, and placed the JS files in the folder.

Any help?

Answer 1

First, some suggestions:

• When developing a page, add your JavaScript and CSS in small chunks so your page/site doesn't grow to an unmanageable size before you understand what's going on.
• When adding something new, sometimes it's helpful to add the CSS in the tag. Then ensure the problem isn't caused by a linking problem.

---

Now to your question. Based on your page, it looks like your HTML was messed up. All I did was copy the HTML from the Superfish v1.4.8 example page and replace your menu.

It looks like your menu is missing many of the necessary classes for the menu. For example, look at the difference between your top menu element and the sample's:

Your code: <ul class="sf-menu">

Sample code:<ul id="sample-menu-1" class="sf-menu sf-js-enabled sf-shadow">

I also used the original CSS for .sf-menu ul.

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

Working Example: http://jsfiddle.net/HtBUZ/

Action Items to fix your page

1. Correct your HTML using the Superfish v1.4.8 example.

2. Make sure your scripts are correct.

   1. Your page is missing JQuery.

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

   2. Your page is incorrectly linking hoverIntent.js.
3. Revert your CSS to the original -999em value for .sf-menu ul.