Problem with CSS Sprites in Menu with JQuery [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 9 years ago.

I have been given a code-base that was owned by someone else. I have a tight deadline and I have been spinning my wheels on this problem for a while. This code is using a table in the top portion of the page. The table has a drop down menu. The menu consists of CSS sprites due to branding 开发者_StackOverflowneeds. Each of the root items ("home", "about", "services") are of different sizes. The child items of each menu are consistently the same size.

The menu renders fine with two exceptions:

1. In IE 9, the menu looks fine. In Chrome (and I suspect other browsers) the root item ("home", "about", "services") changes size on mouse over. This change in size causes part of the next image in the main image file to appear. I only want the root item image I need to appear.
2. The menu appears to drop down from the vertical-middle of the cell. I just want the menu to appear. Currently, it is animating. How do I make it just appear?

---

It seems like it would be so much easier to look at this problem from a different angle. Rather than using sprites to achieve the desired result, how about looking at it from a javascript point of view...you're already half way there!

1. Start with your good, clean UL list. That's in pretty good shape, but it will need a bit of format tweaking:

   <ul id='menu'>
<li><a href="#aa">Home</a></li>
<ul> <li class="current"><a href="/About/News.aspx">News</a></li> <li><a href="/About/Mission.aspx">Mission Statement</a></li> </ul>
</li>
... </ul>

In a nutshell, every time you need another nested element, throw a list inside your li. Drop the onclicks and other "extras" Superfish will do that for you.

1. Add Superfish to your page and invoke it on the UL list

   $(document).ready(function(){
       $("ul.menu").superfish();
   });
   

2. Set backgrounds using CSS on the <li> elements.

3. Set rounded corners to desired elements using JqueryUI. Add the class "ui-corner-bl" for bottom left, "ui-corner-br" for bottom right, etc.

4. Tweak hovers via CSS

I went to this solution a while back to replace a very poorly done menu similar to what you're dealing with. Menus have a lot of behaviors -- especially when they're huge and nested as my site has -- so they take patience. However, this solution will buy you much easier maintenance as if one of the menu items change, you simply change it in code, not with graphics. That alone could gain hours. Plus, you'll gain a bit of speed as there's less to download.

---

Wow. The problem was a missing semi-colon!