Need Help Finalizing My PHP/CSS Dropdown menu

[jimmyoneshot]

I think after a lot of trouble I've finally managed to get my hierarchical php driven hierarchical dropdown menu working. I now have 1 problem with it which I simply can't figure out. Rather than explain this I think a picture is worth a thousand words so here's the script in action:-

 

http://www.coolvisiontest.com/garyssite/rhrvouchers/menu4.php

 

If you notice in that example when you hover over categories then level1a then level2a the menu's and their children appear 1 at a time as they should. However if you hover over level1a then level2b then all at once all of the child categories of 2b and all of their child catagories and their child categories etc appear at once rather than one at a time. You should have to hover over level3e to see level4a and you should have to hover over level4a to see level5a etc.

 

The code I have is a combination of 2 sets of code I came across to be honest so I'm having trouble figuring it out.

 

 

At the moment I only have 3 problems with it:-

 

1. I only want subcategories to be shown when their parent category is hovered over as explained above

2. I only want the bottom level of categories to act as links e.g. levels 2c 3a 3b 3c 3d and 5a would act as links in this example as they are the last of all the children, the rest of the categories should be plain text. I'm not sure if this is achievable though as I think links are required for the hover functionality.

3. I want some way of indicating to the user that a category has children perhaps by including a little right arrow or plus sign and of course this should only be included for the categories that have children and not the others.

 

Can anyone help me out with these three things please? Here's my code so far:-

 

<?php	

$link = mysqli_connect('localhost','','');
mysqli_select_db($link,'');

$query = mysqli_query($link,'SELECT * FROM nested_categories');
while ( $row = mysqli_fetch_assoc($query) ){        
$menu_array[$row['id']] = array('id' => $row['id'],'name' => $row['name'],'parent' => $row['parent_id']);
}

function generate_menu($parent){        
$has_childs = false;        

global $menu_array;        

foreach($menu_array as $key => $value){                
	if ($value['parent'] == $parent){ 
                              
		if ($has_childs === false){                                

			$has_childs = true;                                
			echo '<ul>';                        
		}                        

		echo '<li><a href="menu4.php?id='.$value['id'].'">'.$value['name'].'</a>';                        
		generate_menu($key);                        

		echo '</li>';                
	}        
}        
if ($has_childs === true) echo '</ul>';
}

?>

<div id="menu">
<ul>

<li><h2>categories</h2>

<?php generate_menu(0); ?>

</li>

</ul>

</div>

 

And the Css:-

 

#menu {
width: 100%;
background: #eee;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}


#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}



#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
top: 0;
left: 100%;
}




div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

[jimmyoneshot]

:-\ Any ideas?