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