Jquery CSS menu going wider than set width

**colinod** · Mar 6 '13, 05:51 PM

I have a JQuery and CSS menu tha can be seen here

Yakety Yak All Mouth Ltd | London Voice Over Agent

http://www.yaketyyak.co.uk/newpages/boys2.asp?id=386&voicetype=All

Yakety Yak is a leading Voice Over Agency based in London. We specialise in Voice Casting, Celebrity Voiceovers as well as English and International voices.

I am having trouble because although the overall width of the menu is set in css it always seems to go wider when hovering over buttons.

CSS is as follows

Code:

#ddmenu {
    margin: 0;
	margin-left: -2px;
    padding: 0;
    height:43px;
    width:938px;
	background-color:#F00;
}
     
#ddmenu li {   
    float: left;
    list-style: none;
    font: 16px Arial, Helvetica, sans-serif;
}
#ddmenu li a { 
    display: block;
    padding: 0px 0px;
    text-decoration: none;
    width: auto;
    color: #fff;
    white-space: nowrap;
    text-align:center;
	font-weight:bold;
}
#ddmenu li a:hover {   
	color: #ef007b;
	font-weight: 800;
}
#ddmenu li ul {
    margin: -6px 0 0 3px;
    padding: 0;
    position: absolute;
    visibility: hidden;
    width: 600px;
	background-color:#f39617;
}
 
#ddmenu li ul li { 
    display:inline;
}
 
#ddmenu li ul li a {
    width:auto;   
    display: inline;
    color: #000;
    font-size: 13px;
    padding: 2px 10px;
	font-weight: 800;
	background-color: #fff;
	margin: 2px;
}
 
#ddmenu li ul li a:hover { 
    padding: 2px 10px;
}

and asp generated html for this page is

Code:

<ul id="ddmenu">
 <li><a href="boys2.asp?id=386&voicetype=All"><img src="http://bytes.com/submit/images/voicetypes/tabs/mainpage_up.png" alt="Main Page" id="mainpage" onMouseOver="MM_swapImage('mainpage','','../images/voicetypes/tabs/mainpage_dn.png',1)" onMouseOut="MM_swapImgRestore()" border="0"></a></li>
 


    <li><a href="javascript:void(0)"><img src="http://bytes.com/submit/images/voicetypes/tabs/UK Accents_up.png" alt="UK Accents" id="UK Accents" onMouseOver="MM_swapImage('UK Accents','','../images/voicetypes/tabs/UK Accents_dn.png',1)" onMouseOut="MM_swapImgRestore()" border="0"></a>
        <ul class="menu_class">
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Neutral" >Neutral</a></li>
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Irish" >Irish</a></li>
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Scottish" >Scottish</a></li>
        
        </ul>         
    </li>
    


    <li><a href="javascript:void(0)"><img src="http://bytes.com/submit/images/voicetypes/tabs/Ages_up.png" alt="Ages" id="Ages" onMouseOver="MM_swapImage('Ages','','../images/voicetypes/tabs/Ages_dn.png',1)" onMouseOut="MM_swapImgRestore()" border="0"></a>
        <ul class="menu_class">
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=20s-30s" >20's - 30's</a></li>
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=30s" >30s</a></li>
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=30s-40s" >30's - 40's</a></li>
        
        </ul>         
    </li>
    


    <li><a href="javascript:void(0)"><img src="http://bytes.com/submit/images/voicetypes/tabs/Styles_up.png" alt="Styles" id="Styles" onMouseOver="MM_swapImage('Styles','','../images/voicetypes/tabs/Styles_dn.png',1)" onMouseOut="MM_swapImgRestore()" border="0"></a>
        <ul class="menu_class">
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Animation/Cartoon" >Animation/Cartoon</a></li>
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Authoritative" >Authoritative</a></li>
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Characterful/Quirky" >Characterful/Quirky</a></li>
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Comedy/Humorous" >Comedy/Humorous</a></li>
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Deep/Powerful/Dramatic" >Deep/Powerful/Dramatic</a></li>
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Documentary/Corporate" >Documentary/Corporate</a></li>
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Friendly/Upbeat" >Friendly/Upbeat</a></li>
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Impressions" >Impressions</a></li>
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Kid-Friendly" >Kid Friendly</a></li>
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Movie-Trailer" >Movie Trailer</a></li>
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Sports-Commentator" >Sports Commentator</a></li>
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Versatile" >Versatile</a></li>
        
        </ul>         
    </li>
    


    <li><a href="javascript:void(0)"><img src="http://bytes.com/submit/images/voicetypes/tabs/World Accents_up.png" alt="World Accents" id="World Accents" onMouseOver="MM_swapImage('World Accents','','../images/voicetypes/tabs/World Accents_dn.png',1)" onMouseOut="MM_swapImgRestore()" border="0"></a>
        <ul class="menu_class">
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Australian" >Australian</a></li>
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Dutch" >Dutch</a></li>
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=French" >French</a></li>
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Mexican" >Mexican</a></li>
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Oriental" >Oriental</a></li>
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Russian" >Russian</a></li>
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=South-African" >South African</a></li>
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=Spanish" >Spanish</a></li>
        
        </ul>         
    </li>
    
<li><a href="boys2.asp?id=386&voicetype=USA/Mid-Atlantic"><img src="http://bytes.com/submit/images/voicetypes/tabs/usa mid atlantic_up.png" alt="Main Page" id="usamid" onMouseOver="MM_swapImage('usamid','','../images/voicetypes/tabs/usa mid atlantic_dn.png',1)" onMouseOut="MM_swapImgRestore()" border="0"></a>
</li>



    <li><a href="javascript:void(0)"><img src="http://bytes.com/submit/images/voicetypes/tabs/Foreign Languages_up.png" alt="Foreign Languages" id="Foreign Languages" onMouseOver="MM_swapImage('Foreign Languages','','../images/voicetypes/tabs/Foreign Languages_dn.png',1)" onMouseOut="MM_swapImgRestore()" border="0"></a>
        <ul class="menu_class">
        
        <li class="menu_class2"><a href="boys2.asp?id=386&voicetype=French-Language" >French Language</a></li>
        
        </ul>         
    </li>
     
</ul>

jquery for menu is

Code:

$(document).ready(function () {
// <![CDATA[
    var timeout    = 500;
    var closetimer = 0;
    var ddmenuitem = 0;
         
    function ddmenu_open(){
        ddmenu_canceltimer();
           ddmenu_close();
           ddmenuitem = $(this).find('ul').css('visibility', 'visible');
		   $('#biog').css('visibility', 'hidden');
    }
         
    function ddmenu_close(){
        if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
		$('#biog').css('visibility', 'visible');
    }
         
    function ddmenu_timer(){
        closetimer = window.setTimeout(ddmenu_close, timeout);
    }
         
    function ddmenu_canceltimer(){ 
        if(closetimer){ 
            window.clearTimeout(closetimer);
                closetimer = null;
    }}
         
    $(document).ready(function(){ 
        $('#ddmenu > li').bind('mouseover', ddmenu_open)
        $('#ddmenu > li').bind('mouseout',  ddmenu_timer)
    });
         
    document.onclick = ddmenu_close;
// ]]>  
});

I have tried adjusting all widths, the red background is the overall width on the menu set in #ddmenu at 938px and i would have thought that any menu or sub menu elements within this menu would not go wider than this?

thanks