Want to add a menu bar to my site

[PlecPicker]

Hi.

So far i have been making my site in php/sql with a 960css grid,

But since i am relearning as i go, my menu bar leaves much to be desired.

it uses radio buttons >.<

my site is: http://plecpicker.com

It only needs to be a simple menu, since i will be launching with very limited stock, but i need to structure it for easy dev. That is how i'm designing the whole site,

My java skills are very old and mostly forgotten, gonna start reading up again, but any links directed towards this area would be great.

P.S. Smartphone compatibility is important.

Thanks for reading guys.

[dmaarc123]

nice work dude.
Can you please help to make my website in html,
my website www.dmaarc.com is also made in php, but i want to make it in html and jquery but not in php because of SEO point of view.
If you can help me in this matter so see you soon.

[PlecPicker]

Thanks dude!
I can talk to you on facebook if you like
Saves logging in and logging out of this site

Like, follow or google +1 plecpicker. Just click all the buttons at the top of my site and message/write on the wall. Do whats easiest for you.

[PlecPicker]

Hey, that last reply was my mate/business partner...

I am not gonna claim to 100&#37; understand this code...
I have tweaked it enough from what i copied to do what i need.
Yet since i needed 2 menus, i had to double the code...
I doubt this is the best coding practice way, but it works.

Here's my code, hope you find it useful

CssHorizontalMenu.JS

var cssmenuids=["cssmenu1"]
var cssmenuid=["cssmenu2"]
var csssubmenuoffset=-1

function createcssmenu2(){
    for (var i=0;i<cssmenuids.length;i++){    var ultags=document.getElementById(cssmenuids[i]).getElementsByTagName("ul")        
        for(var t=0;t<ultags.length;t++){        
            ultags[t].style.top=ultags[t].parentNode.offsetHeight+csssubmenuoffset+"px"
            var spanref=document.createElement("span")
            spanref.innerHTML="&nbsp;&nbsp;&nbsp;&nbsp;"
            ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
            ultags[t].parentNode.onmouseover=function(){
                this.style.zIndex=100
                this.getElementsByTagName("ul")[0].style.visibility="visible"
                this.getElementsByTagName("ul")[0].style.zIndex=0}
            ultags[t].parentNode.onmouseout=function(){
                this.style.zIndex=0
                this.getElementsByTagName("ul")[0].style.visibility="hidden"
                this.getElementsByTagName("ul")[0].style.zIndex=100}}}    
        for (var i=0;i<cssmenuid.length;i++){ var ultags=document.getElementById(cssmenuid[i]).getElementsByTagName("ul")        
        for(var t=0;t<ultags.length;t++){        
            ultags[t].style.top=ultags[t].parentNode.offsetHeight+csssubmenuoffset+"px"
            var spanref=document.createElement("span")
            spanref.innerHTML="&nbsp;&nbsp;&nbsp;&nbsp;"
            ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
            ultags[t].parentNode.onmouseover=function(){
                this.style.zIndex=100
                this.getElementsByTagName("ul")[0].style.visibility="visible"
                this.getElementsByTagName("ul")[0].style.zIndex=0}
            ultags[t].parentNode.onmouseout=function(){
                this.style.zIndex=0
                this.getElementsByTagName("ul")[0].style.visibility="hidden"
                this.getElementsByTagName("ul")[0].style.zIndex=100}}}}
if(window.addEventListener) window.addEventListener("load",createcssmenu2,false)
else if(window.attachEvent) window.attachEvent("onload",createcssmenu2) 

In My CSS file:

.horizontalcssmenu ul{margin:0;padding:0;list-style-type:none;}
.horizontalcssmenu ul li{position:relative;display:inline;float:left;}
.horizontalcssmenu ul li a{display:block;width:145px;/**/padding:1px 1px;border:1px solid #000000;border-left-width:0;text-decoration:none;background:url(images/menubg.gif) center center repeat-x;color:#D4A017;font:bold 25px Tahoma;}
.horizontalcssmenu ul li ul{left:0;top:0;border-top:1px solid #000000;position:absolute;display:block;visibility:hidden;z-index:100;}
.horizontalcssmenu ul li ul li{display:inline;float:none;}
.horizontalcssmenu ul li ul li a{width:180px;/**/font-weight:normal;padding:2px 5px;background:#050505;border-width:0 1px 1px 1px;}
.horizontalcssmenu ul li a:hover{background:url(images/menubgover.gif) center center repeat-x;}
.horizontalcssmenu ul li ul li a:hover{background:#D4A017;  color:#000000;}
* html p#iepara{padding-top:1em;}
* html .horizontalcssmenu ul li{float:left;height:1%;}
* html .horizontalcssmenu ul li a{height:1%;}

.horizontalcssmenu2 ul{margin:0;padding:0;list-style-type:none;}
.horizontalcssmenu2 ul li{position:relative;display:inline;float:left;}
.horizontalcssmenu2 ul li a{display:block;width:140px;height:25px;/**/padding:1px 1px;border:1px solid #000000;border-left-width:0;text-decoration:none;background:url(images/menubg.gif) center center repeat-x;color:#D4A017;font:bold 17px Tahoma;}
.horizontalcssmenu2 ul li ul{left:0;top:0;border-top:1px solid #000000;position:absolute;display:block;visibility:hidden;z-index:100;}
.horizontalcssmenu2 ul li ul li{display:inline;float:none;}
.horizontalcssmenu2 ul li ul li a{width:165px;/**/font-weight:normal;padding:2px 5px;background:#050505;border-width:0 1px 1px 1px;}
.horizontalcssmenu2 ul li a:hover{background:url(images/menubgover.gif) center center repeat-x;}
.horizontalcssmenu2 ul li ul li a:hover{background:#D4A017;  color:#000000;}
* html .horizontalcssmenu2 ul li{float:none;height:1%;}
* html .horizontalcssmenu2 ul li a{height:1%;} 

The actual html code:

<div class='horizontalcssmenu  '>
    <ul id='cssmenu1'>
        <li style='border-left: 1px solid #202020;'><a href='http://plecpicker.com/?search&t=strings&o=DESC'>Strings</a><ul>
            <li><a href='http://plecpicker.com/?search&t=strings&st=acoustic&o=DESC'>Acoustic Guitar</a></li>
            <li><a href='http://plecpicker.com/?search&t=strings&st=classical&o=DESC'>Classical Guitar</a></li>
            <li><a href='http://plecpicker.com/?search&t=strings&st=electric&o=DESC'>Electric Guitar</a></li>
            <li><a href='http://plecpicker.com/?search&t=strings&st=bass&o=DESC'>Bass Guitar</a></li>
            <li><a href='http://plecpicker.com/?search&t=strings&st=banjo&o=DESC'>Banjo</a></li>
            <li><a href='http://plecpicker.com/?search&t=strings&st=ukulele&o=DESC'>Ukulele</a></li></ul></li>
        <li><a href='http://plecpicker.com/?search&t=plecs&o=DESC'>Plectrums</a><ul>
            <li><a href='http://plecpicker.com/?search&t=plecs&st=plastic&o=DESC'>Celluloid</a></li>
            <li><a href='http://plecpicker.com/?search&t=plecs&st=thumb&o=DESC'>Thumb Picks</a></li>
            <li><a href='http://plecpicker.com/?search&t=plecs&st=metal&o=DESC'>Metal</a></li></ul></li>
        <li><a href='http://plecpicker.com/?search&t=other&o=DESC'>Accessories</a><ul>
            <li><a href='http://'>Straps</a></li>
            <li><a href='http://'>Leads</a></li>
            <li><a href='http://'>Tuners</a></li>
            <li><a href='http://'>Pedals</a></li>
    </ul></li></ul></div> 

This is how i ended up doing it, Hope it helps