Hello,
I would like to change my navigational menu of my website. I would like a sprite menu and other sprite graphics. Below I have the links and code from another forum but it is exactly what I would like to do. I can not find where to place the html code for my main page. I know the "names" ie #header and #mainmenu are different or need to be changed. I did do alot of searching this and other Zen cart forum posts. I didn't want to "just"change core files. I know that is a no no. Any help would be greatly appreciated.

My site is www.eastcoastcaps.net zencart v1.39b cherry zen

I am looking to make a navigation menu similar to the following:

http://www.coremediadesign.co.uk/web...ia_design.html

This is the sprite image they use.

http://img819.imageshack.us/img819/8185/menuo.png



CSS
Code:


Code:
#header {
	width:100%;
	height: 150px;
	background: black;
	padding:0;
	margin:0;
}
#mainMenu {
	list-style:none;
	overflow:hidden;
	width:980px;
	margin:0 auto;
}

#mainMenu li {
	display:inline;
}

#mainMenu a {
	float:left;
	width:137px;
	padding:16px 0;
	text-align:center;
	font:normal 14px/17px arial,helvetica,sans-serif;
	background:url(images/menuo.png) 0 0 no-repeat;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	background-position:0 -49px;
}

#mainMenu .current a {
	background-position:0 -98px;
}
HTML
Code:

HTML Code:
<div id="header">
<div style="height: 101px">&nbsp;</div>
<ul id="mainMenu">
	<li class="current"><a href="#">Tab 1</a></li>
	<li><a href="#">Tab 2</a></li>
	<li><a href="#">Tab 3</a></li>
	<li><a href="#">Tab 4</a></li>
	<li><a href="#">Tab 5</a></li>
	<li><a href="#">Tab 6</a></li>
	<li><a href="#">Tab 7</a></li>
</ul>
</div>[PHP][/PHP]
I don't know if I posted this right this is my first post ever.