使用JQuery在菜单中使用CSS Sprites的问题

Question

我获得了一个由其他人拥有的代码库。我有一个紧迫的截止日期，我一直在解决这个问题。此代码使用页面顶部的表格。该表有一个下拉菜单。由于品牌需求，菜单包含CSS精灵。每个根项（“主页”，“约”，“服务”）具有不同的大小。每个菜单的子项始终具有相同的大小。

菜单呈现正常，但有两个例外：

1. 在IE 9中，菜单看起来很好。在Chrome中（我怀疑其他浏览器）根项目（“home”，“about”，“services”）会在鼠标悬停时更改大小。此大小的更改会导致主图像文件中的下一个图像的一部分出现。我只想要出现的根项目图像。
2. 菜单似乎从单元格的垂直中间下拉。我只想要菜单出现。目前，它是动画。我如何让它出现？

Answer 1

从不同角度看这个问题似乎更容易。而不是使用精灵来实现期望的结果，如何从javascript的角度来看待它...你已经在那里了一半！

1. 从优质，干净的UL列表开始。这是非常好的形状，但它 将需要一些格式调整：

   <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>

简而言之，每当你需要另一个嵌套元素时，在你的li中抛出一个列表。放下onclicks和其他“额外”Superfish会为你做这件事。

1. 将Superfish添加到您的网页并在UL列表中调用

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

2. 在<li>元素上使用CSS设置背景。

3. 使用JqueryUI将圆角设置为所需元素。左下角添加“ui-corner-bl”类，右下角添加“ui-corner-br”等。

4. 通过CSS调整h / h

我回到这个解决方案一段时间后，取代了一个非常糟糕的菜单，类似于你正在处理的菜单。菜单有很多行为 - 特别是当它们很大并且像我的网站那样嵌套时 - 所以他们需要耐心。但是，此解决方案将为您提供更简单的维护，就像其中一个菜单项发生更改一样，您只需在代码中更改它，而不是使用图形。仅此一点就可以获得数小时另外，你可以获得一点速度，因为下载速度较慢。

Answer 2

哇。问题是缺少分号！