Hello all,

I recently created a CSS menu using EngIn Site CSS Editor, so that I could replace my current navigation bar (currently powered by the EZ Pages section).

At the moment, this is what I have: https://www.the-ishop.co.uk, and this is using the EZ Pages bit.

However, I want to add my own one. I have the HTML code, and the CSS code ready and waiting, but have no idea how to go about implementing it in my site.

Here's the code I have got:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> 
<html><head> 
<title>CSS DropDown Menu without JavaScript, PureCSS, Rollover</title> 
<style type="text/css"> 
body { padding: 3em; }
 
#cssm1 *  { padding:0; margin: 0; font: 1em arial; }
 
#cssm1 { margin: 0 auto; float: left; line-height: 50px; }
 
#cssm1 a { display: block; font-family:verdana; border: 1px solid #fff; height:30px; background: #001133; color:#DDD; text-align: center; text-decoration:none; font-weight:none; padding: 3px 10px; }
#cssm1 a:hover { color:#FFCC00; }
 
 
#cssm1 ul li, #cssm1 ul li ul li  { width: 120px; list-style-type:none; }
 
#cssm1 ul li { float: left; width: 120px; }
 
#cssm1 ul li ul, #cssm1:hover ul li ul, #cssm1:hover ul li:hover ul li ul{ 
	display:none;
	list-style-type:none; 
	width: 120px;
	}
 
#cssm1:hover ul, #cssm1:hover ul li:hover ul, #cssm1:hover ul li:hover ul li:hover ul { 
	display:block;
	}
 
#cssm1:hover ul li:hover ul li:hover ul { 
	position: absolute;
	margin-left: 120px;
	margin-top: -20px;
	}
 
 
 
 
</style> 
 
</head><body> 
<div id="cssm1"> 
	<ul> 
		<li><a href="#">Apple</a> 
				<ul> 
				<li><a href="https://www.the-ishop.co.uk/apple-iphone-4-c-51_2.html">iPhone 4</a></li> 
				<li><a href="https://www.the-ishop.co.uk/apple-iphone-3gs3g2g-c-51_3.html">iPhone 3G/S</a></li>
				<li><a href="https://www.the-ishop.co.uk/apple-ipad-c-51_4.html">iPad</a></li>
				<li><a href="https://www.the-ishop.co.uk/apple-ipad-2-c-51_44.html">iPad 2</a></li> 
				<li><a href="https://www.the-ishop.co.uk/apple-ipod-touch-c-51_5.html">iPod Touch</a></li> 			
				</ul> 
		
		</li> 
		<li><a href="#">BlackBerry</a>
		       		<ul> 
				<li><a href="https://www.the-ishop.co.uk/blackberry-torch-c-6_61.html">Torch</a></li> 
				<li><a href="https://www.the-ishop.co.uk/blackberry-bold-c-6_73.html">Bold</a></li>
				<li><a href="https://www.the-ishop.co.uk/blackberry-curve-c-6_63.html">Curve</a></li>
				<li><a href="https://www.the-ishop.co.uk/blackberry-storm-c-6_74.html">Storm</a></li> 
				<li><a href="https://www.the-ishop.co.uk/blackberry-pearl-c-6_62.html">Pearl</a></li> 			
				</ul> 
		</li>
				
		<li><a href="#">HTC</a>
		       		<ul> 
				<li><a href="#">Sensation</a></li>
    				<li><a href="#">Evo 3D</a></li>
				<li><a href="#">Flyer</a></li> 
				<li><a href="#">ChaCha</a></li>
				<li><a href="#">Salsa</a></li> 
				<li><a href="#">Incredible</a></li>
				<li><a href="#">HD7</a></li> 
				<li><a href="#">7</a>
		  		       <ul> 
				       <li><a href="#">Mozart</a> 
				       <li><a href="#">Trophy</a> 
				       </ul> 
				       </li>
     	                        <li><a href="#">Wildfire</a>
     	                               <ul> 
				       <li><a href="#">Wildfire</a> 
				       <li><a href="#">Wildfire S</a> 
				       </ul>
				       </li> 
				<li><a href="#">Desire</a>
				       <ul> 
				       <li><a href="#">Desire</a> 
				       <li><a href="#">Desire HD</a> 
				       <li><a href="#">Desire S</a> 
				       <li><a href="#">Desire Z</a> 
				       </ul> 
				       </li>
				<li><a href="#">Legend</a></li>
				<li><a href="#">Smart</a></li>
				<li><a href="#">Other</a></li>
				</ul> 
		</li>
		
		<li><a href="#">Samsung</a>
		       		<ul> 
				<li><a href="https://www.the-ishop.co.uk/samsung-galaxy-tab-p1000-c-52_48.html">Galaxy Tab</a></li> 
				</ul> 
		</li>
		
		<li><a href="https://www.the-ishop.co.uk/blog">Blog</a></li>		
		<li><a href="https://www.the-ishop.co.uk/faq-ezp-1.html">FAQ</a></li> 
		<li><a href="https://www.the-ishop.co.uk/account.html">Account</a></li> 
		       	        		
	</ul> 
</div> 
</body></html>

Obviously the HTML bit will go into something like the tpl_header.php file, but where would I put the CSS stuff, and link it to the HTMl code?


All help appreciated!