God afton!
Jag har hittat en js-kod som fungerar toppen när det gäller att ha en horisontell meny med en horisontell undermeny. Problemet är bara att så fort jag trycker på nån av undermenyns knappar så försvinner den och man måste föra musen över den första menyknappen för att den ska synas igen.
Jag vill alltså att undermenyn ska ligga kvar även efter att man har klickat på den. Kan nån hjälpa mig?!?!?
<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>
/* ----------- Navigation ----------- */
ul, li{
border:0;
padding:0;
margin:0;
list-style:none;
}
#navigation{
background-image:url(images/menybild5.jpg);
height:25px;
margin:0 auto;
width:auto;
}
#navigation ul{
height:32px;
line-height:25px;
}
#navigation ul li{
display:inline;
}
#navigation ul li a,
#navigation ul li a:visited{
padding:0 15px;
display:block;
text-decoration:none;
float:left;
color:#000000;
font-weight:bold;
}
#navigation ul li a.thisPage{
color:#626847;
}
#navigation ul li a:hover{
color:#626847;
}
/* ----------- Sub Menu ----------- */
#sublinks{
width:auto;
margin:0 auto;
background:#80875c;
height:25px;
font-size:12px;
}
#sublinks ul{
line-height:25px;
}
#sublinks ul li{
display:inline;
}
#sublinks ul li a,
#sublinks ul li a:visited{
padding:0 5px 0 15px;
display:block;
text-decoration:none;
float:left;
color:#FFFFFF;
}
#sublinks ul li a.thisPage{
text-decoration:none;
color:#c3ca9f;
}
#sublinks ul li a:hover{
text-decoration:none;
color:#c3ca9f;
}
/* ----------- Hide Sub menu ----------- */
#s1, #s2, #s3, #s4{
display:none;
}
<!-- Main Menu -->
<div id="navigation">
<ul id="mymenu">
<li><a href="index.html" onmouseover="javascript:showsubmenu(4)">Startsida</a></li>
<li><a href="lunch.html" onmouseover="javascript:showsubmenu(1)">Veckans lunch</a></li>
<li><a href="#" class="thisPage" onmouseover="javascript:showsubmenu(2)">Menyförslag</a></li>
<li><a href="buffe.html" onmouseover="javascript:showsubmenu(3)">Bufféförslag</a></li>
<li><a href="galleri.html" onmouseover="javascript:showsubmenu(4)">Galleri</a></li>
<li><a href="kontakt.html" onmouseover="javascript:showsubmenu(4)">Kontakta oss</a></li>
</ul>
</div>
<!-- SUB MENU -->
<div id="sublinks">
<ul id="s1">
<li><a href="husman.html">Husman</a></li>
<li><a href="alternativ.html">Alternativ</a></li>
<li><a href="sallad.html">Sallad</a></li>
</ul>
<ul id="s2">
<li><a href="forratt.html">Förrätter</a></li>
<li><a href="varmratt.html">Varmrätter</a></li>
<li><a href="efterratt.html">Efterrätter</a></li>
</ul>
<ul id="s3">
<li><a href="buffe1.html">Buffé 1</a></li>
<li><a href="buffe2.html">Buffé 2</a></li>
<li><a href="buffe3.html">Buffé 3</a></li>
<li><a href="buffe4.html">Buffé 4</a></li>
<li><a href="buffe5.html">Buffé 5</a></li>
<li><a href="buffe6.html">Buffé 6</a></li>
</ul>
<ul id="s4">
<li><a href="#"></a></li>
</ul>
</div>