Hide submenu

Hi,

How to hide the sub menu unless onmouseover is chosen.

By default it shows the grey image and submenu of first option.
How to avoid it

[code]
<style>
ul, li{border:0; padding:0; margin:0; list-style:none;}

/* ———– Navigation ———– */
#top-navigation{
background:url(./ajpg);
width:auto;
height:58px;
margin:0 auto;
}
#navigation{
background:url(img/nav-bg.gif) repeat-x;
height:32px;
margin:0 auto;
width:auto;
}
#navigation ul{
height:32px;
line-height:32px;
}
#navigation ul li{
display:inline;
}
#navigation ul li a,
#navigation ul li a:visited {
background:url(img/line-a.gif) right no-repeat;
padding:0 20px;
display:block;
text-decoration:none;
float:right;
color:#4261df;
font-weight:bold;
text-shadow:#ffffff 2px 2px 2px;
}
#navigation ul li a:hover {
color: #1532a5;
}
/* ———– Sub Menu ———– */
#sublinks{
width:auto;
margin:0 auto;
background:#888888 url(img/sublink.gif);
height:30px;
font-size:11px;
}
#sublinks ul{
height:32px;
line-height:31px;
}
#sublinks ul li{
display:inline;
}
#sublinks ul li a,
#sublinks ul li a:visited {
padding:0 20px;
display:block;
text-decoration:none;
float:right;
color:#FFFFFF;
}
#sublinks ul li a:hover {
text-decoration:underline;
}

/* ———– Hide Sub menu ———– */
#s2, #s3{display:none;}
</style>
[/code]

[code]
<script type=”text/javascript”>
function showsubmenu(id){
submenu = document.getElementById(‘s’+id);
for(i=1;i<=4;i++){
if(i==id){
submenu.style.display=”block”;
} else {
document.getElementById(‘s’+i).style.display=”none”;
}
}
}
</script>

[/code]

[code]
<div id=”top-navigation”>
<!– Something in the header here –>
</div>

<!– Main Menu –>
<div id=”navigation”>
<ul id=”mymenu”>

<li><a href=”#” onmouseover=”javascript:showsubmenu(1)”>TAB</a></li>
<li><a href=”#” onmouseover=”javascript:showsubmenu(2)”>TAB1</a></li>
<li><a href=”#” onmouseover=”javascript:showsubmenu(3)”>TAB2</a></li>
<li><a href=”#” onmouseover=”javascript:showsubmenu(4)”>TAB3</a></li>
</ul>
</div>

<!– SUB MENU –>
<div id=”sublinks”>

<ul id=”s1″>
<li><a href=”#”>subtab1</a></li>
<li><a href=”#”>subtab2</a></li>
<li><a href=”#”>subtab3</a></li>
</ul>

<ul id=”s2″>

<li><a href=”#”>subtab1</a></li>
</ul>

<ul id=”s3″>

<li><a href=”#”>subtab</a></li>
</ul>

<ul id=”s4″>
<li><a href=”#”>subtab</a></li>
</ul>
</div>
[/code]

[upl-file uuid=abfb78ff-bf78-4b25-8a55-8f66dd945f56 size=46B]line-a.gif[/upl-file]

[upl-file uuid=659c92bc-ad41-43f5-918f-60a2bc873be6 size=169B]nav-bg.gif[/upl-file]

[upl-file uuid=04712008-67ed-438f-983b-bca421702751 size=192B]sublink.gif[/upl-file]

[upl-file uuid=6c90ff62-4c2e-4fe0-88a8-5822aeb9a36e size=579B]topnav-bg.gif[/upl-file]

Also in #CSS _↴