[CSS] droplist menu

programming web dev
1

hi all,

i have a drop down menu that looks perfectly in safari and IE7 but it’s looks a lit off in FF my question is how do I make it looks the same in FF?

the script is


#container{
    width:984px;
    margin:0px;
    padding:0px;
}
/*extra nav*/
#r_menu{
    position:inherit;
    font-family:"century gothic", verdana, arial, sans-serif;
    font-size:12px;
    list-style-image: url(images/colon.gif);
}
#r_menu li a{
    color:#999;
    text-decoration:none;
}
#r_menu li a:hover{
    color:#ccc;
    text-decoration:none;
}
#r_menu li a:visited{
    color:#ccc;
    text-decoration:none;
}
/*main nav*/
#menu{
    margin:0px;
    padding:0px;
}
#menu li{
    margin:0px;
    float:left;
    display:block;
    border:1px solid #ccc;
    list-style-type:none;
    background-color:#999;
}

#menu li ul{
    display:none;
}
#menu li.off ul{
    display:none;
    position:absolute;
}
#menu li a{
  /*for all links in the list*/
      color:#000000;
      font-size:14px;
    font-weight:bold;
    font-family: "century gothic", verdana, arial, sans-serif;
    display:block;
    height:13px;
    width:95px;
    padding:4px;
    *padding:3px;
    margin-bottom:4px;
    *margin-bottom:7px;
    text-align:center;
    text-decoration:none;
}
#menu li:hover a, #b-home #n-home, #b-*** #n-***, #b-clist #n-clist, #b-testi #n-testi, #b-contact #n-contact, #b-faq #n-faq{
    color:#fff;
}
#menu li.off li a{
    float:left;
    width:auto;
    padding-bottom:5px;
}

[COLOR=Red] #menu li.off:hover ul, #menu li.off.over ul{
    display:block;
    padding:0;
    margin:0;
    
}[/COLOR]

#menu li.off:hover ul a:hover, #menu li.off.over ul a:hover{
    color:#fff;
}
#menu li.off:hover a, #menu li.off.over a{
    color:#fff;
}
#menu li.off:hover ul a, #menu li.off.over ul a{
    color:#000;
}

the part that red is the one that need to be fix…If I put margin-top:5px in there then it will looks perfect in FF but it would looks off by 5px in IE7 and safari…

any suggestion how to fix it?