CSS Drop Down Menu (Positioning Problem)

Hello Everyone,
I am redoing my site, and the site that I am having a question about can be viewed below:

http://www.shawnsitsolutions.com/TestSite/

Now, you can look at the source and see how the CSS drop menu is created using <UI> and <LI>

But if you noticed with the menu, when you click on a top category the sub menus are brought down below it and to the left. THey are all aligning down and to the left.

I want to be able to make them drop straight below the category or parent like the below site:

http://www.cssplay.co.uk/menus/final_drop.html

I have the colors and stuff set up on mine, so want to be able to figure out how to change this if i can.

I am including a copy of the CSS code, so you can take a look as I am not sure if it is a CSS change or a javascript change.

/*
-----------------------------------
TabBar Magic Style Sheet
by Project Seven Development
www.projectseven.com
Style Theme:01 - Basic
-----------------------------------
*/
#p7TBM {
font-family:Arial, Helvetica, sans-serif;
}
#p7TBMroot {
background-color: #000;
font-size: 1em;
}
#p7TBMrootbox {}

#p7TBMroot img {
border: 0;
}
#p7TBMroot ul {
margin: 0;
padding: 0;
}
#p7TBMroot li {
list-style-type: none;
display: inline;
}
#p7TBMroot li a {
float: left;
}
#p7TBMroot .p7TBMtext li a {
color: #fff;
padding: 5px 10px;
text-decoration: none;
border-right: 1px solid #1759C9;
}
#p7TBMroot .p7TBMtext .p7TBMdown, #p7TBMroot .p7TBMtext .p7TBMdown:hover {
color: #fff!important;
background-color: #000!important;
}
/*
The Root Level Hover. This also locks the Hover state while
the root item's associated sub-menu is visible.
DO NOT CHANGE SELECTOR NAMES*/
.p7ie6Fix:active,
#p7TBMroot .p7TBMtext .p7TBMon,
#p7TBMroot .p7TBMtext li a:focus,
#p7TBMroot .p7TBMtext li a:active {
color: #fff;
background-color: #1759C9;
}
#p7TBMsubwrap{
font-size: .8em;
position: relative;
height: auto;
}
.p7TBMsub {
position: absolute;
visibility:hidden;
left: 0;
top: 0;
width: 100%;
}
.p7TBMsubbox {
padding: 8px 0 0 0;
}
/*
SUBMENU BAACKGROUNDS and BORDERS HERE*/
.p7TBMsub ul {
margin: 0;
padding: 0;
background:#fff;
border: 0;
}
.p7TBMsub li {
list-style-type: none;
display: inline;
}
.p7TBMsub li a {
color: #fff;
padding: 6px;
display: block;
float: left;
border-right: 1px solid #fff;

}
.p7TBMsub li a:hover,
.p7TBMsub li a:active,
.p7TBMsub li a:focus {
color: #fff;
background-color: #1759C9;
border-color: #1759C9;
text-decoration: none;
}
#p7TBM br {
clear: both;
height: 0;
line-height: 0.0;
font-size: 1px;
}

/* current marker style */
.p7TBMsub .p7TBMmark,
.p7TBMsub .p7TBMmark:hover,
.p7TBMsub .p7TBMmark:active,
.p7TBMsub .p7TBMmark:focus {
font-weight:bold;
color: #333333;
cursor: default;
text-decoration: underline;
}



And below is the JavaScript so you can take a look at it as well.

/*
------------------------------------------------
TabBar Magic menu scripts
Copyright (c) 2005-2006 Project Seven Development
www.projectseven.com
Version: 1.0.2
------------------------------------------------
*/

var p7tbma=new Array();
var p7tbmt=new Array();

function P7_initTBM(){ //v1.0.2 by PVII-www.projectseven.com
//define over and down image suffix
var Iv = "_f2";
var Id = "_f3";
var i,j,x,k,d,nV,tB,tbs,iM,im,ts,tA,sA,nA=new Array();
document.p7tbmsw=new Array();p7tbma=arguments;
if(!document.getElementById||document.p7tbmf){return;}
tb=document.getElementById('p7TBM');if(!tb){return;}tb.onmouseout=P7_TBMclose;
tB=document.getElementById('p7TBM');nV=document.getElementById('p7TBMroot');
if(!nV||!tB){return;}tA=nV.getElementsByTagName('A');j=0;for(i=0;i<tA.length;i++){
p7tbmt[j]=tA.id;j++;d='p7TBMsub'+tA.id.replace('p7TBMt','');
tbs=document.getElementById(d);if(tbs){tbs.onmouseover=function(){P7_TBMsub(this);};}
p7tbmt[j]=(tbs)?tbs.id:false;tA.hasSub=p7tbmt[j];j++;tA.isRoot=true;
tA.onclick=function(){return P7_TBMtrig(this);};
tA.onmouseover=function(){P7_TBMovr(this);};tA.p7state=0;tA.hasIm=false;
iM=tA.getElementsByTagName('IMG');if(iM&&iM[0]){im=iM[0];ts=im.getAttribute("src");
x=ts.lastIndexOf(".");nA[0]=ts.substring(0,x);nA[1]='.'+ts.substring(x+1);
im.p7mimg=new Array();im.p7mimg[0]=ts;if(p7tbma[1]>1){ts=nA[0]+Iv+nA[1];
P7_TBMpl(ts);}im.p7mimg[1]=ts;if(p7tbma[1]==3){im.p7mimg[2]=ts;}
if(p7tbma[1]==1||p7tbma[1]==2){ts=nA[0]+Id+nA[1];P7_TBMpl(ts);if(p7tbma[1]==1){
im.p7mimg[1]=ts;}}im.p7mimg[2]=ts;im.p7state=0;tA.hasIm=true;}}
document.p7tbmf=true;P7_TBMopen();
}

function P7_TBMpl(ims){ //v1.0.2 by PVII-www.projectseven.com
var x=document.p7tbmsw.length;document.p7tbmsw[x]=new Image();document.p7tbmsw[x].src=ims;
}

function P7_TBMovr(a){ //v1.0.2 by PVII-www.projectseven.com
if(!document.p7tbmf){return;}if(document.p7TBMtm){clearTimeout(document.p7TBMtm);}P7_TBMswp(a);
if(p7tbma[0]==1){document.p7TBMtm=setTimeout("P7_TBMshow('"+a.id+"')",p7tbma[4]);
}else{P7_TBMshow(a.id);}}

function P7_TBMswp(d){ //v1.0.2 by PVII-www.projectseven.com
var i,cl,a;for(i=0;i<p7tbmt.length;i+=2){a=document.getElementById(p7tbmt);
cl=a.className;if(p7tbmt!=d.id){if(a.p7state<2){if(cl.indexOf("p7TBMon")>-1){
a.className=cl.replace("p7TBMon",'');}if(a.hasIm){im=a.getElementsByTagName('IMG')[0];
if(im.p7state<2){im.src=im.p7mimg[0];}}}}else{if(a.p7state!=2){if(cl.indexOf("p7TBMon")==-1){
a.className=(cl&&cl.length>0)?cl+" p7TBMon":"p7TBMon";}if(a.hasIm){
im=a.getElementsByTagName('IMG')[0];if(im.p7state<2){im.src=im.p7mimg[1];}}}}}
}

function P7_TBMshow(d){ //v1.0.2 by PVII-www.projectseven.com
var a,i,im,cl;a=document.getElementById(d);if(a.hasIm){im=a.getElementsByTagName('IMG')[0];
if(im.p7state==0){im.src=im.p7mimg[1];im.p7state=1;}}if(a.hasSub){if(a.p7state!=2){
a.p7state=1;cl=a.className;if(cl.indexOf("p7TBMon")==-1){
a.className=(cl&&cl.length>0)?cl+" p7TBMon":"p7TBMon";}}
document.getElementById(a.hasSub).style.visibility="visible";P7_TBMtg(a);}
}

function P7_TBMtg(d){ //v1.0.2 by PVII-www.projectseven.com
var i,im,s,cl;for(i=0;i<p7tbmt.length;i+=2){if(!d||p7tbmt!=d.id){
a=document.getElementById(p7tbmt);if(a.hasIm){im=a.getElementsByTagName('IMG')[0];
if(im.p7state<2){im.src=im.p7mimg[0];im.p7state=0;}}if(a.p7state!=2){a.p7state=0;
cl=a.className;if(cl.indexOf("p7TBMon")>-1){a.className=cl.replace("p7TBMon",'');}}
s=document.getElementById(p7tbmt[i+1]);if(s){s.style.visibility="hidden";}}}
}

function P7_TBMtrig(a){ //v1.0.2 by PVII-www.projectseven.com
var h,hh,ret=false;P7_TBMdown(a);h=a.href;hh='javascript:; javascript:void(0)';
if(p7tbma[3]==1){if(h.charAt(h.length-1)=='#'||document.location.href==h){
ret=false;}else{ret=(hh.indexOf(h)>-1)?false:true;}}else{ret=false;}return ret;
}

function P7_TBMdown(a){ //v1.0.2 by PVII-www.projectseven.com
var i,aa,im,cl;for(i=0;i<p7tbmt.length;i+=2){aa=document.getElementById(p7tbmt);
aa.p7state=0;aa.className=P7_trim(aa.className.replace("p7TBMdown",''));if(aa.hasIm){
im=aa.getElementsByTagName('IMG')[0];im.p7state=0;}}a.p7state=2;if(a.hasIm){
im=a.getElementsByTagName('IMG')[0];im.p7state=2;im.src=im.p7mimg[2];}else{cl=a.className;
a.className=(cl&&cl.length>0)?cl+" p7TBMdown":"p7TBMdown";}P7_TBMshow(a.id);
}
function P7_trim(t){ //v1.0.2 by PVII-www.projectseven.com
t=t.replace(/^\s/,'');t=t.replace(/\s$/,'');return t;
}

function P7_TBMclose(evt){ //v1.0.2 by PVII-www.projectseven.com
var i,pp,tS,d,p,f,m=true;evt=(evt)?evt(event)?event:null);if(evt){
tS=(evt.relatedTarget)?evt.relatedTarget:evt.toElement;if(tS){pp=tS;
while(pp){if(pp.id){d=pp.id;if(pp.id.indexOf("p7TBM")>-1){m=false;break;}}
pp=pp.parentNode;}if(m){f='P7_TBMtg()';if(p7tbma[2]==1){for(i=0;i<p7tbmt.length;i+=2){
p=document.getElementById(p7tbmt);if(p.p7state==2){f="P7_TBMshow('"+p.id+"')";}}}
if(p7tbma[0]==1){eval('document.p7TBMtm=setTimeout("'+f+'",'+parseInt(p7tbma[4]+50)+')');
}else{eval(f);}}}}
}

function P7_TBMsub(s){ //v1.0.2 by PVII-www.projectseven.com
if(document.p7TBMtm){clearTimeout(document.p7TBMtm);}
var d=s.id.replace("p7TBMsub","p7TBMt"),a=document.getElementById(d);
P7_TBMswp(a);
}

function P7_TBMmark(){document.p7TBMop=arguments;}

function P7_TBMopen(){ //v1.0.2 by PVII-www.projectseven.com
var x,i,j,k,kk,wH,tM,tA,pp,cl,a,nd,op,r1,aU;wH=window.location.href;
var mt = new Array(1,'','');if(document.p7TBMop){mt=document.p7TBMop;}op=mt[0];
if(op<1){return;}r1=/index\.[\S]*/i;k=-1,kk=-1;tM=document.getElementById('p7TBM');
tA=tM.getElementsByTagName("A");for(j=0;j<tA.length;j++){aU=tA[j].href.replace(r1,'');
if(op>0){if(tA[j].href==wH||aU==wH){k=j;kk=-1;break;}}if(op==2){if(tA[j].firstChild){
if(tA[j].firstChild.nodeValue==mt[1]){kk=j;}}}if(op==3 && tA[j].href.indexOf(mt[1])>-1){
kk=j;}if(op==4){for(x=1;x<mt.length;x+=2){if(wH.indexOf(mt[x])>-1){
if(tA[j].firstChild&&tA[j].firstChild.nodeValue){if(tA[j].firstChild.nodeValue==mt[x+1]){
kk=j;}}}}}}k=(kk>k)?kk:k;if(k>-1){a=false;if(!tA[k].hasIm&&!tA[k].isRoot){cl=tA[k].className;
tA[k].className=(cl&&cl.length>0)?cl+" p7TBMmark":"p7TBMmark";}pp=tA[k].parentNode;
while(pp){if(pp.id&&pp.id=='p7TBMroot'){a=tA[k];break;}if(pp.id&&pp.id.indexOf('p7TBMsub')>-1){
nd='p7TBMt'+pp.id.replace('p7TBMsub','');a=document.getElementById(nd);break;}
pp=pp.parentNode;}if(a){P7_TBMdown(a);}}
}


I sure hope someone can help me figure this out. Thank you in advance as well.

 

Just use suckerfish dropdowns. It doesn't need javascript just plain xhtml and css.
The js file for the dropdown is only intended for IE because of its lack of support for li:hover.

You can see sample code and explanation here:
http://www.alistapart.com/articles/dropdowns

 

glorie speaks the truth, suckerfish is where it's at. Google "sons of suckerfish" to see a variant of this technique.