Ok so Im having a, template designed and coded but to keep costs down im trying to utilise my old menu structure here www.electrifire.co.uk

The problem is the old menu is vertical and the new layout will have a horizontal menu so Im not sure what I need to change, could someone help me understand some of the code so I can adapt it to my new layout, I understand that Im asking for free help but is the season of giving and all that

This is the java script:

<?php
?>
<script language="JavaScript" type="text/javascript">
<!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("sidenav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

//--><!]]>
</script>

This is the CSS:

.navbg { background:url(/images/navbg.gif) repeat-y;}

.slidedoormenu{
list-style-type: none; margin:0 auto;
padding: 0;
width: 210px; /* width of menu (don't forget to add border with below!) */
border-left: 0px solid #ffa1a3; /* thick left border of menu */

}

.slidedoormenu li{
border-bottom: 1px solid #D6D6D6; /* Gray border beneath each menu item */
}

.slidedoormenu li a{
background: white url(/images/vstrip.gif) repeat-y left top; /* Background image positioned to the left(v) top(h) corner initially */
font: bold 18px calibri, Trebuchet MS;
display: block;
color: black;
width: auto;
border-bottom: 0px solid white; /* White border beneath each menu item link, to add depth */
padding: 5px 0; /* Vertical (top/bottom) padding for each menu link */
text-indent: 8px;
text-decoration: none;
}

.slidedoormenu li a:visited, .slidedoormenu li a:active{
color: black;
}

.slidedoormenu li a:hover{
background-position: -387px 0; /* Shift background image horizontally 387px, or the start of the 2nd background image */
color: #ffffff;
}

.slidedoormenu li.lastitem, .slidedoormenu li.lastitem a{
border-bottom-width: 0; /* For last menu item within menu, remove bottom border */
}

.slidedoormenu li.lastitem a{
padding: 6px 0; /* increase vertical border of last menu link by 2px (default is padding: 7px 0) to account for removed border width */
}

In order to turn a vertical list to a horizontal list, add display: inline to the <li> properties. OR, you could float the <li> to get them to horizontal.

thank you I'll give it a go when I get the new design