Yesterday, I needed another drop-down menu and decided to use the Superfish jQuery plugin again. The plugin was the topic for an earlier post here.
Unfortunately, it didn’t want to work correctly. It seemed to be adding the last item in a sublist to the top of the list. It was also not spacing the buttons correctly. It was just acting crazy! It seemed to have a mind of it’s own that was throwing <li>’s wherever it wanted to throw them.
I checked my CSS over and over again. It seemed like a CSS problem to me because it just didn’t want to show the items in the correct order or in the correct place.
I searched Google to see if anyone else had had the same problem and came up empty. No one was having this problem. So, that helped me to realize that there had to be a bug in my own code.
Usually when I have a bug that is hiding very well, I start taking out parts of the code until I figure out which piece of code is causing the problems. I keep narrowing it down until I finally see what usually turns out to be a stupid little error that I’ve just looked at so long that I’ve lost my objectivity.
That’s exactly what I found again, but since I couldn’t find where anyone else had written about this online, I thought maybe someone else might make the same stupid mistake I made. Maybe I can help them find it much quicker than I found mine.
My list looked like this:
<ul>
<li><a href="/mylink">menu item 1</a>
<ul>
<li><a href="/mylink2">sub-menu item 1</li>
<li><a href="/mylink3">sub-menu item 2</li>
</ul>
</li>
...
</ul>
I bet you found the error already. I looked at that code what seemed like a bazillion times before I realized that I had left out my closing </a> tags. I never dreamed those sneaky little tags could cause so much havoc! As soon as I put them where they should be, the menu started working properly.
Here’s what it should have looked like:
<ul>
<li><a href="/mylink">menu item 1</a>
<ul>
<li><a href="/mylink2">sub-menu item 1</a></li>
<li><a href="/mylink3">sub-menu item 2</a></li>
</ul>
</li>
...
</ul>
Maybe this will help someone else whose looked at their code for too long.
The post Superfish jQuery Drop-Down Menu Not Working appeared first on Cullen Web Services.
