Background woes

programming web dev
1

Hello guys,
I would like to make a nested CSS for a bunch of tabs for a site I am making and for this I was hoping to use a CMS like mambo or drupal. Ok so anyway, I am having a go at it and this is where im stuck. The middle image : active-menu-m.png which is supposed to tile x is not appearing.
Any help would be appreciated. THANKS!

The code is as follows:
HTML:


            <div id="horiz-menu">
            <div id="horiz-menu1">
            <ul>
            <li class="active" id="horiz-menu1">
           <a href="dsds.html">hello</a>
            </li>
            </ul>
                        </div>
                </div>

CSS:


#horiz-menu1{
    background: url(images/active-menu-m.png) 0 0  repeat;
}
#horiz-menu {
    height: 56px;
}

#horiz-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#horiz-menu li {
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    background: none;
}

#horiz-menu a {
    white-space: nowrap;
    font-family: Arial Narrow, Helvetica, sans-serif;
    color: #fff;
    display: block;
    float: left;
    height: 53px;
    line-height: 53px;
    font-weight: normal;
    text-transform: uppercase;
    padding: 0px 27px 0px 27px;
    background: url(images/menu-divider.png) 100% 0 no-repeat;
}
#horiz-menu li.active,
#horiz-menu li.active_menu {
    background: url(images/active-menu-r.png) 100% 0 no-repeat;
}
#horiz-menu li.active a,
#horiz-menu li.active_menu a {
    background: url(images/active-menu-l.png) 0 0 no-repeat ;
    color: #000;
}