显示平铺的精灵图片以进行网页导航

Question

我正在尝试对网站的导航栏进行编程，以便在选择该页面时，精灵索引会更改为像按钮一样突出显示其背后的背景。

精灵是垂直平铺的，因此第一个按钮在第一个拼贴中突出显示，第二个按钮在下一个拼贴中突出显示，依此类推。

但是，我也在使用weebly，并且我自己尝试编程越来越多的代码，因此导航代码是自动完成的，因此我不确定如何实现它，因此当选择页面时，突出显示了后面的按钮。

从理论上讲，我知道该怎么做，但是我不确定要使用什么功能，因为我是CSS的新手。 我将如何做：1.计算出哪个代码将当前网页作为变量返回2.通过使用以下内容计算平铺背景的新位置：（网页位置）*精灵高度，或键入：if webpage = menu sprite_position = 1 * sprite_height

有关导航的当前代码为：

#navigation {
  font-family: Ethnocentric, arial, sans-serif;
  position: relative;
  width: 1082px; /*For adjusting the navigation's usable width*/
  height: 29px;
  z-index: 2;
  padding: 11px 0px 0px 45px; /*Fourth argument changes the starting navigation postion*/
  background: url(Ngbck.png) no-repeat;
  _bbbackground: none;
  _fffilter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='files/theme/navigationbg.png', sizingMethod='crop');
}

#navigation ul li {
  float: left;
  font-size: 16px;
  text-transform: uppercase;
  padding: 0px;
  margin: 4px 0px 0px 40px;
}

#navigation ul li a {
  color: #0bf;
}

#navigation ul li a:hover, #navigation ul li#active a {
  color: #f00;
}

#weebly-menus .weebly-menu-wrap { z-index: 5000; margin: 13px 0px 0px 0px; }
#weebly-menus .weebly-menu { padding: 0; margin: 0; list-style: none; }
#weebly-menus .weebly-menu li { float: left; clear: left; width: 168px; text-align: left; }
#weebly-menus .weebly-menu li a { position: relative; display: block; width: 148px; background: #001020; border-top:  none; border-bottom: 1px solid #404a51; border-right: 1px solid #404a51; border-left: 1px solid #404a51; text-decoration: none; font-size: 12px; font-weight: normal; line-height:1; padding: 8px 6px 8px 12px; color: #0bf; }
#weebly-menus .weebly-menu li a:hover { background: #131f28; color: #c00; }

Answer 1

Weebly的引擎添加了

#active

当前所选菜单的LI元素的标识符。 该标识符应用于菜单中的列表元素，并且根据您当前所处的页面而变化。

因此，我认为为了修改此类菜单的外观，您需要在模板编辑器的CSS文件末尾添加选择器，例如#navigation ul li#active或#navigation ul li#active a （取决于效果）-因此，您的自定义选择样式。

人们还没有太多访问呈现Weebly页面的代码的权限-但是有一些特定的规则-因此人们已经为Weebly的客户模板（企鹅的模板？）进行了设计。

彼得