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

Question

I'm attempting to program my website's navigation bar so when that page is selected the sprite index changes to highlight the background behind it like a button.

The sprite is tiled vertically so the first button is highlighted in the first tile and the second in the next etc.

However I'm also using weebly and am trying to program more and more of it myself to learn, so the navigation code was automatically done thus I'm not sure how to implement it so when a page is selected the button behind is highlighted.

In theory I understand how to do it, I'm just unsure of what functions to use as I'm completely new to CSS. How I would do it is: 1. Work out which code returns the current webpage as a variable 2. Calculate the new position for the tiled background by using: (webpage position) * sprite height, or typing out: if webpage = menu sprite_position = 1 * sprite_height

The current code regarding to the navigation is:

#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's engine adds

#active

identifier to LI element of currently selected menu. This identifier is applied to list element in menu and this changes depending on what page you are at the moment.

So I think in order to modify look of such menu you will need to add selector like #navigation ul li#active or #navigation ul li#active a (depending on effect) at the end of CSS file in template editor - so your custom style is picked.

One has not much access to code that renders Weebly's page yet - but there are some specific rules - so people design customer template for Weebly's already (Penguins' templates?)

Peter