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!
Bookmarks