CSS menu hide current submenu when other menu item is hovered - css

Question

I'm designing a new website, but I currently have the following problem:
In the menu, when the I open a page with a sub menu, and then hover a menu item without sub menu I want to display an empty gray bar. But I've got no clue how to do this.
To reproduce this go to this page: http://www.kvvikingvenlo.nl/joomla/nl/aluminium-gietwerk.html and then hover over the home item in the menu. (Home has no sub menu, so I want the gray bar to be empty.)
Edit
I'm sorry, my question seems to be quite hard to understand. Lets try again:
On the web page http://www.kvvikingvenlo.nl/joomla/nl/aluminium-gietwerk.html there is a menu which is always displays the current sub menu, until you hover a different sub menu. This part is already working.
But when you hover Home, you will still see:"ONTWIKKELING, HOGEDRUK SPUITGIETEN, CNC-NABEWERKING and MONTAGE".
These are the sub menu items of the parent "Processen" (which is the current active one)
Because home does not have any sub menu items, i want this bar to be empty instead.

Answer 1

i think you would have to do this through javascript, you have you .active on your ul and that is the parent you your li what is the parent to your a so in order to change the child tag to display as .active you would do this through javascript. i hope that makes sense.

Answer 2

If I understood correctly, if there is no submenu to the menu section, you just want to display the grey bar beneath.
This menu is being done with nested UL and LI tags with CSS, it is a very common technique.
I should warn you though, that the effect in the page you linked doesn't do what you need in IE <9. There are a few pure CSS menu examples that achieve this purpose quite easily.
If you don't want (or know) how to change it because it would mean messing with Joomla's inner workings, what I think you can do is: first create an empty SPAN inside a "fake" LI under HOME, then, set that specific (via class or id attribute in the HTML) SPAN with width equal to the gray bar. then set display:block; to the SPAN. This has to be done when the :hover event occurs in the parent class of the SPAN.
For example:
If you set the class of the SPAN tag to hideme:
.menumenu li ul li .hideme {
width: [width of the grey bar];
}
.menumenu li:hover ul li .hideme { display:block; }
It's not pretty, but it should work.
EDIT I had the right idea, but wrong execution (too early in the morning)
What you actually need is to give a unique identifier to a fake UL under the HOME LI (ie fakeUL), nest a LI inside of it to hold a SPAN tag, define the size of that SPAN tag with the width property, and then the CSS could be something like:
.menumenu li .fakeUL li span {
width: [width of the grey bar];
}
.menumenu li:hover .fakeUL li span { display:block; }

Answer 3

I ended up in making a template override in joomla so that it inserted an empty ul tag in the menu. I thought this would be the cleanest option I had.
To make a template override copy the file \modules\mod_mainmenu\tmpl\default.php to \templates\YOURTEMPLATE\html\mod_mainmenu\default.php
Then find this code in the file you copied:
if (isset($path) && $node->attributes('id') == $path[0]) {
$node->addAttribute('id', 'current');
} else {
$node->removeAttribute('id');
}
$node->removeAttribute('rel');
$node->removeAttribute('level');
$node->removeAttribute('access');
And add these lines just BEFORE them.
if (($node->name() == 'li') && !isset($node->ul)) {
$node->addChild('ul ');
$node->addChild('/ul');
}
Hope I helped anyone!