Menu rewrite

original_menu.css

/* =Menu
-------------------------------------------------------------- */
div.menu { width: 570px; height: 72px; float: left; margin: 0 auto; padding: 22px 0 0 0; }
div.menu ul { width: 570px; height: 33px; margin: 0; padding: 0; float: left; background: url("images/mainnav.gif") no-repeat top left; }
div.menu ul li { list-style-type: none; float: left; margin: 0; padding: 0; display: inline; height: 33px; }
div.menu ul li a { display: block; height: 33px; text-indent: -9999px; outline: none; margin: 0; }

div.menu ul li.nav_home a { width: 86px; }
div.menu ul li.nav_bio a { width: 55px; }
div.menu ul li.nav_shows a { width: 62px; }
div.menu ul li.nav_music a { width: 82px; }
div.menu ul li.nav_video a { width: 88px; }
div.menu ul li.nav_photos a { width: 103px; }
div.menu ul li.nav_store a { width: 94px; }

div.menu ul li.nav_home a:hover { background: url(images/mainnav.gif) no-repeat 0px (-1 * $menu-height); }
div.menu ul li.nav_bio a:hover { background: url(images/mainnav.gif) no-repeat -86px -33px; }
div.menu ul li.nav_shows a:hover { background: url(images/mainnav.gif) no-repeat -141px -33px; }
div.menu ul li.nav_music a:hover { background: url(images/mainnav.gif) no-repeat -203px -33px; }
div.menu ul li.nav_video a:hover { background: url(images/mainnav.gif) no-repeat -285px -33px; }
div.menu ul li.nav_photos a:hover { background: url(images/mainnav.gif) no-repeat -373px -33px; }
div.menu ul li.nav_store a:hover { background: url(images/mainnav.gif) no-repeat -476px -33px; }

style.scss

/* =Menu
-------------------------------------------------------------- */
@mixin nav_elements($elements, $widths, $height) {
  // loop through elements
  @for $i from 1 through length($elements) {
    $offset: 0px;
    // offset: add widths left to right
    @if $i > 1{
      @for $ii from 1 through ($i - 1) { 
        $offset: $offset - nth($widths, $ii); }
    }
        
    ul li.nav_#{nth($elements, $i)} a { width: nth($widths, $i); }
    ul li.nav_#{nth($elements, $i)} a:hover { background: url(images/mainnav.gif) no-repeat $offset (-1 * $height); }
  }
}

div.menu {
  // Menu Parameters
  $nav-height: 72px;
  $menu-height: 33px;
  $menu-width: 570px;
  $menu-padding: 22px;
  $menu-elements: home, bio, shows, music, video, photos, store; // name of each element in order
  $menu-element-width: 86px, 55px, 62px, 82px, 88px, 103px, 94px; //width of each element in order
  
  width: $menu-width; height: $nav-height; float: left; margin: 0 auto; padding: $menu-padding 0 0 0;  
  ul { width: $menu-width; height: $menu-height; margin: 0; padding: 0; float: left; background: url(images/mainnav.gif) no-repeat top left; }
  ul li { list-style-type: none; float: left; margin: 0; padding: 0; display: inline; height: $menu-height; }
  ul li a { display: block; height: $menu-height; text-indent: -9999px; outline: none; margin: 0; }
  
  @include nav_elements($menu-elements, $menu-element-width, $menu-height)
}