Expand Css Menu By Maximum Entry Length

[justinbriggs1]

Hello everyone, I have a CSS menu question if you don't mind.The site in question is www.adcuda.comI have been trying to get the dynamic navigation bar on the main page to expand to the width of the longest entry. In this case, it is the one under Solutions-->Additional Services that reads "Extra long page name to test menu wrap". By default it wraps, but I would like it to expand. Trial and error doesn't seem to be getting a lot of results. Can anyone help me out? Thanks,JW

[glopal]

I'm assuming it's a css menu with some javascript in the background. Could we see the css?

[justinbriggs1]

I'm assuming it's a css menu with some javascript in the background. Could we see the css?

Sure, here are the important parts:/* navigation */#top #nav{float:right;position:absolute;top:20px;right:60px;}#nav, #nav ul{margin:0;padding:0;list-style-type:none;list-style-position:outside;position:relative;line-height:32px; z-index:3;}#top #nav a{display:block;padding:0px 15px;text-decoration:none;text-align:center;line-height:33px; outline:none;}#top #nav a:hover{text-decoration:underline;}#top #nav li{float:left;position:relative;}#top #nav li li{border-left:none;}#top #nav ul {position:absolute;display:none;width:170px;top:33px;}#top #nav li ul a{color:#f4f4f4;white-space:nowrap;width:auto;height:auto;float:left;border:1px solid #181818;text-align:left;}#top #nav ul ul{top:auto;} #top #nav li ul ul {left:172px;top:0px;}And here is the javascript if it is required:function kriesi_mainmenu(){ if(!jQuery.browser.msie){// IE - 2nd level Fix jQuery(" #nav ul ").css({opacity:"0.95"}); }jQuery("#nav a").removeAttr('title');jQuery(" #nav ul ").css({display: "none"}); // Opera FixjQuery(" #nav > li > ul").parent().find("a:first").append("<span class='sub_list'> </span>");jQuery(" #nav ul li > ul").parent().find("a:first").append("<span class='sub_sub_list'> </span>");jQuery(" #nav li").hover(function(){ jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400); },function(){ jQuery(this).find('ul:first').css({visibility: "hidden"}); });}

[glopal]

Try this, change this:

#top #nav ul {position:absolute;display:none;width:170px;top:33px;}

To this:

#top #nav ul {position:absolute;display:none;min-width:170px;top:33px;}

[justinbriggs1]

Try this, change this:

#top #nav ul {position:absolute;display:none;width:170px;top:33px;}

To this:

#top #nav ul {position:absolute;display:none;min-width:170px;top:33px;}

Thanks, but the min width isn't really going to help in this situation, as I need the <li> anchors to adjust the size of the container. I can make this happen, but then the menu is full of jagged entries. I need the longest entry to determine the width of the other boxes, which is my problem.