Troubles with Dropdown Menus

[Lala-chan]

I'm having issues with some dropdown menu code i'm using on my blogspot page. If I leave the font as 12px Helvetica, it works just fine. But once I change the size or font, I mouse over the tab and the dropdown menu disappears before I can click it. Can anyone help me fix this? I would like to use bold 24px Calligraffitti. Here is the code:

/*----- MBT Drop Down Menu ----*/

#mbtnavbar { 
background: ##FFFFFF; 
width: 960px; 
color: #FFF; 
margin: 0px; 
padding: 0; 
position: relative; 
border-top:0px solid #960100; 
height:35px;
}

#mbtnav { 
margin: 0; 
padding: 0; 
} 
#mbtnav ul { 
float: left; 
list-style: none; 
margin: 0; 
padding: 0; 
} 
#mbtnav li { 
list-style: none; 
margin: 0; 
padding: 0; 
border-left:0px solid #333; 
border-right:0px solid #333; 
height:35px; 
} 
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited { 
color: #000000; 
display: block; 
font:normal 12px Helvetica, sans-serif; 
margin: 0; 
padding: 9px 12px 10px 12px; 
text-decoration: none; 

} 
#mbtnav li a:hover, #mbtnav li a:active { 
background: #FFFFFF; 
color: #000000; 
display: block; 
text-decoration: none; 
margin: 0; 
padding: 9px 12px 10px 12px; 



}
#mbtnav li { 
float: left; 
padding: 0; 
} 
#mbtnav li ul { 
z-index: 9999; 
position: absolute; 
left: -999em; 
height: auto; 
width: 160px; 
margin: 0; 
padding: 0; 
} 
#mbtnav li ul a { 
width: 140px; 
} 
#mbtnav li ul ul { 
margin: -25px 0 0 161px; 
} 
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul { 
left: -999em; 
} 
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul { 
left: auto; 
} 
#mbtnav li:hover, #mbtnav li.sfhover { 
position: static; 
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited { 
background: #CCCCCC; 
width: 120px; 
color: #000000; 
display: block; 
font:normal 12px Helvetica, sans-serif; 
margin: 0; 
padding: 9px 12px 10px 12px; 
text-decoration: none; 
z-index:9999; 
border-bottom:1px dotted #333;

} 
#mbtnav li li a:hover, #mbtnavli li a:active { 
background: #CCCCCC; 
color: #000000; 
display: block; 
margin: 0; 
padding: 9px 12px 10px 12px; 
text-decoration: none; 
}

[BubikolRamios]

I would like to use bold 24px Calligraffitti

Do not. Avoid that at all costs. There is chance that that font will not be on end user machine/os/browser.

limit yoursef to something like this:

 *
 {
font-family:tahoma,verdana,arial,helvetica;
}

search the web for most common fonts.