Hide submenu

[rashmi_k28]

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

 

<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>

 

<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>

 

 

<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>

 

 

 

 

[attachment deleted by admin]