horizontal CSS menu

[theengineer]

Hi,

I was needing some pointers or help on which file i should be looking at so i can have a horizontal CSS menu like this Dynamic Drive CSS Library- Chrome Menu Bar


on my website, I would really appreciate any help you can offer.
Thanks in advance.

[theengineer]

Ok Seems i got one working (works for me) what i did is the following (hopefuly will help anyone else looking for something
similar)

Firstly I opened up main_page.tpl.php from the template dir and added the following after these lines :

 </a>&nbsp;&nbsp;<a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . tep_image(DIR_WS_IMAGES . 'header_cart.gif', HEADER_TITLE_CART_CONTENTS) . '</a>&nbsp;&nbsp;<a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_checkout.gif', HEADER_TITLE_CHECKOUT) . '</a>'; ?>&nbsp;&nbsp;</td>
  </tr>
</table> 
  

<table border="0" width=620 cellspacing="0" cellpadding="1" align=center>
<td valign="middle">
<tr class="header">
<div id="chromemenu">
  <ul>
    <li><a href="login.php" title="Link 1"><span><?php echo HEADER_TITLE_MY_ACCOUNT ?></span></a></li>
    <li><a href="shopping_cart.php" title="Link 2"><span><?php echo HEADER_TITLE_CART_CONTENTS ?></span></a></li>
    <li><a href="login.php" title="Link 3"><span><?php echo HEADER_TITLE_CHECKOUT ?></span></a></li>
      </ul>
</div>  
</td>
</tr>
</table> 

From here i Opened up stylesheet.css from the same template dir and put in the following at the bottom :

/*- Menu Tabs --------------------------- */

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#chromemenu{
width: 99%;
font-weight: bold;
font-size: 90%;
}

#chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

#chromemenu ul{
border: 1px solid #BBB;
width: 100%;
background: url(images/chromebg.gif) center center repeat-x;
padding: 5px 0;
margin: 0;
text-align: left; /*set value to "right" for example to align menu to the left of page*/
}

#chromemenu ul li{
display: inline;
}

#chromemenu ul li a{
color: #494949;
padding: 5px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}

#chromemenu ul li a:hover{
background: url(images/chromebg2.gif) center center repeat-x;
}

</style>

I then ftped the images from Dynamic Drive CSS Library- Horizontal CSS Menus for that particular menu and everything seems to work so far.