Keeping submenu visibly?!?

JavaScript
1

I’m trying to figure this out… I have a menu with a horizontal submenu. What I want is for the submenu to stay active if the mainmenu link is activated… This I got so far. Now what I cant figure out is how to make the active submenu hide when hovering over the other mainmenu links… And show again when not hovering…

Here is what I have tryid so far:

#navbar {
   top: 0;
   left: 0;
   margin: 0;
   padding: 0;}
#navbar li {
   list-style: none;
   float: left; }
#navbar li a {
   display: block;
   padding: 3px 8px;
   text-transform: uppercase;
   text-decoration: none; 
   color: #999;
   font-weight: bold; }
#navbar li a:hover {
   color: #000; }
#navbar li ul {
   display: none;  }
#navbar li:hover ul, #navbar li.hover ul {
   /*position: absolute;*/
   display: inline;
   /*left: 0;*/
   width: 100%;
   margin: 0;
   padding: 0; }
#navbar li:hover li, #navbar li.hover li {
   float: left; }
#navbar li:hover li a, #navbar li.hover li a {
   color: #000; }
#navbar li li a:hover {
   color: #357; }
#navbar li:hover ul, #navbar li.hover ul, #navbar li ul.active {
   position: absolute;
   display: inline;
   left: 0;
   width: 100%;
   margin: 0;
   padding: 0;
}

Javascript:

function setVisibility(id, visibility) {
	document.getElementById(id).style.display = visibility;
}

And the php:

$currPage = $_GET['page'];

$startTab = array('start','mypage');
$infoTab = array('info','about','contact');

if(in_array($currPage, $startTab)){
	$currID = 'start';
} elseif(in_array($currPage, $infoTab)){
	$currID = 'info';
}
						

echo '<ul id="navbar"> ';
    echo '<li><a href="TEST_menu2.php?page=start" onMouseOver="setVisibility(\\'$currID\\', \\'none\\');" onMouseOut="setVisibility(\\'$currID\\', \\'inline\\');">Start</a>'; 
        if(in_array($currPage, $startTab)){
            echo '<ul id="start" class="active">';
        } else {
            echo '<ul id="start">';
        }
           echo '<li><a href="TEST_menu2.php?page=mypage">My Page</a></li> 
        </ul> 
    </li>';
    echo '<li><a href="TEST_menu2.php?page=info" onMouseOver="setVisibility(\\'$currID\\', \\'none\\');" onMouseOut="setVisibility(\\'$currID\\', \\'inline\\');">Info</a>'; 
        if(in_array($currPage, $infoTab)){
            echo '<ul id="info" class="active">';
        } else {
            echo '<ul id="info">';
        }
           echo '<li><a href="TEST_menu2.php?page=about">About Us</a></li> 
           <li><a href="TEST_menu2.php?page=contact">Contact</a></li> 
        </ul>          
    </li> 
</ul>';

Now this allmost does the part except hidding the active submenu when hovering… Can somebody please help me… Its tearing me apart

2

I have an idea that this:

if(in_array($currPage, $startTab)){
            echo '<ul id="start" class="active">';
        } else {
            echo '<ul id="start">';
        }

Should be handled inside the javascript, but not sure how?!?!?

3

Mayby something about changing class onmouseover?!?! I’m not that good on javascript so please help :slight_smile: