dropdown menu

[attism]

I want to create a dropdown menu in my main menu.
It should look like this:
LINK to the photo

But I don't know how to get it work, that it should count the links (categories) inside the menu. If its more than 6, than it should put the 7th, 8th link (category) in the More... (dropdown).

My code in the PHP file is:

<div id="categories">';
	foreach ($menu->categories as $category) {
		echo '
   			<ul><li', ($category['first']?' class="first"':'') ,'><a href="', $category['url'] ,'">', $category['title'] ,'</a></li>';
	} // foreach
	
		echo '    
		<dl class="dropdown2">
		<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">
		<a href="javascript:void(0);">More...</a>
		</dt>
		
		<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
		<ul><li', ($category['first']?' class="first"':'') ,'><a href="', $category['url'] ,'">', $category['title'] ,'</a></li></ul>

		</dd>
		</dl>
		</li>
		</ul>
</div>

In the PHP file I load a .js file and a .css file.

The .js file is:

var DDSPEED = 10;
var DDTIMER = 15;

// main function to handle the mouse events //
function ddMenu(id,d){
  var h = document.getElementById(id + '-ddheader');
  var c = document.getElementById(id + '-ddcontent');
  clearInterval(c.timer);
  if(d == 1){
    clearTimeout(h.timer);
    if(c.maxh && c.maxh <= c.offsetHeight){return}
    else if(!c.maxh){
      c.style.display = 'block';
      c.style.height = 'auto';
      c.maxh = c.offsetHeight;
      c.style.height = '0px';
    }
	document.getElementById('one-ddheader').style.backgroundPosition = "0 -25px";
    c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
  }else{
    h.timer = setTimeout(function(){ddCollapse(c)},50);
  }
}

function hide_hover()
{
	document.getElementById('one-ddheader').style.backgroundPosition = "0 0px";
}

function show_hover()
{
	document.getElementById('one-ddheader').style.backgroundPosition = "0 -25px";
}

// collapse the menu //
function ddCollapse(c){
  c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
}

// cancel the collapse if a user rolls over the dropdown //
function cancelHide(id){
  var h = document.getElementById(id + '-ddheader');
  var c = document.getElementById(id + '-ddcontent');
  clearTimeout(h.timer);
  clearInterval(c.timer);
  if(c.offsetHeight < c.maxh){
    c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
  }
}

// incrementally expand/contract the dropdown and change the opacity //
function ddSlide(c,d){
  var currh = c.offsetHeight;
  var dist;
  if(d == 1){
    dist = (Math.round((c.maxh - currh) / DDSPEED));
	show_hover();
  }else{
    dist = (Math.round(currh / DDSPEED));
	hide_hover();
  }
  if(dist <= 1 && d == 1){
    dist = 1;
  }
  c.style.height = currh + (dist * d) + 'px';
  c.style.opacity = currh / c.maxh;
  c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
  if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
    clearInterval(c.timer);
  }
}

and the .css file for the menu is:

#categories {
	background: transparent url(images/main_menu_bg.png) no-repeat;
	left: 0px;
	margin:0;
	padding:0;
	list-style-type:none;
	width:auto;
	position:relative;
	display:block;
	height:48px;
	font:bold 14px Arial;
}
#categories li {
	list-style-type: none;
	display: block;
	float:left;
	margin:0;
	pading:0;
}
#categories li.first {
	border-left: 0;
	margin-left: 0;
	padding-left: 0;
}
#categories a {
	display:block;
	float:left;
	color:#FFFFFF;
	text-decoration:none;
	font-weight:bold;
	padding:16px 20px 0 20px;
	height:48px;
	background:transparent url("images/DIVIDER.gif") no-repeat top right;
}
#categories a:hover {
	color:#fef67c;
	height: 48px;
}

.dropdown2 {float:left;  width:66px; margin:0px !important;}

.dropdown2 dt {cursor:pointer; height:25px; width:64px;}

.dropdown2 dt:hover{background-position:0 -25px;}

.dropdown2 dd {position:absolute; overflow:hidden; width:160px; display:none; background:#014ea2; margin-top:5px; z-index:200; opacity:0; text-align:left !important; margin-left:-50px;padding-left:10px;}

.dropdown2 li{clear:both; margin:5px !important;}

.dropdown2 li a{color:#FFFFFF !important;}

.dropdown2 li a:hover{color:#000 !important;}

How can I get it work that my menu show only 6 categories (links) and if it's more put it in the More.. dropdown?
I have tried if and else options but no luck.. I'm not an expert. Any help would be appreciated.

Thank you in advance!

[ko ko]

Codes are so messy. Use period (.) for string concatenation, not comma (,). And also escape the special character when mix-used with javascript parameter like onmouseover="cancelHide(\'one\')" . Escape the single-quote while you're using single-quote, if you use double-quote, escape double-quote in reverse case. Try with below:

foreach ($menu->categories as $category) {
		$class = ($category['first']) ? ' class="first"' : '';
		echo '
   			<ul><li'. $class .'><a href="'. $category['url'] . '">'. $category['title'] . '</a></li>';
	} // foreach
	
		echo '    
		<dl class="dropdown2">
		<dt id="one-ddheader" onmouseover="ddMenu(\'one\',1)" onmouseout="ddMenu(\'one\',-1)">
		<a href="javascript:void(0);">More...</a>
		</dt>
		
		<dd id="one-ddcontent" onmouseover="cancelHide(\'one\')" onmouseout="ddMenu(\'one\',-1)">
		<ul><li' . $class . '><a href="' . $category['url'] . '">' . $category['title'] . '</a></li></ul>

[attism]

I used this code but I got the same problem. In the "More..." I have the last category duplicated. I would want that in the "More..." dropdown to show the the categories that have no space in the menu.

Here is a link to my website with the menu.

I want 6 categories shown in the menu, and the others in the "More..." dropdown.

[attism]

Please guys help me with this, I'm totally stucked.. :(

[attism]

no one?

[attism]

I've done on my own.. thank you