Nån som vet hur jag löser detta?
När jag håller på en länk som visar en submenu så hoppar submenun ner.
Men om jag håller på en länk som inte öppnar en submenu så är den normal?
Hur ska jag göra för att få den såhär hela tiden:
Och inte såhär:
Här är CSS koden
[code]
:.content { margin:0px auto; width: auto; border:1px black solid; text-align:center; } .header { border:3px green solid; height:150px; width: auto; } .footer { text-align:center; } body { background:lightblue; }
#menuHolder { background:url(img/nav-bg.gif) repeat-x; height:32px; margin:0 auto; width:auto; }
#menuHolder ul{ height:32px; line-height:32px; }
#menuHolder ul li{ display:inline; padding:0 20px; }
#menuHolder ul li a,
#menuHolder ul li a:visited { background:url(img/line-a.gif) right no-repeat; padding:0 20px; display:block; text-decoration:none; float:left; color:#4261df; font-weight:bold; text-shadow:
#ffffff 2px 2px 2px; margin:0px auto; }
#menuHolder ul li a:hover{ color:#1532a5; } /* ----------- SUBLINKS ----------- */
#submenuHolder{ width:auto; margin:0 auto; background:#888888 url(img/sublink.gif); height:30px; font-size:11px; }
#submenuHolder ul{ height:32px; line-height:31px; }
#submenuHolder ul li{ display:inline; padding:0 20px; }
#submenuHolder ul li a,
#submenuHolder ul li a:visited { padding:0 20px; display:block; text-decoration:none; float:left; color:#FFFFFF; text-align:center; }
#submenuHolder ul li a:hover{ text-decoration:underline; } /* ----------- SUBMENU ----------- */
#menuItem_0,
#menuItem_1,
#menuItem_3,
#menuItem_4,
#menuItem_5,{display:none;} div#sBar { list-style-type: none; text-align: center; margin: 0px; padding: 0px; height: 29px; margin-bottom: 10px; width: 728px; background-color:
#fff; border: 1px solid
#dfdfdf; position: static; left : 0; } div#sBar li { list-style-type: none; margin: 0px; padding: 0; float: left; width: auto; background: none; }
#sBar div.sBarInside { list-style-type: none; margin: 0px; padding: 0; float: left; }
#sBar div.sBarInside img { float: left; border: 0px;}
#sBar div.sBarInside strong span.checkItOut { color:#0000ff; font-size: 15px; font-family: arial, helvetica; text-decoration: underline; font-weight: bold; }
#sBar div.sBarInside strong { float: left; margin: 6px 0px 0px 5px; font-size: 15px; font-family: arial, helvetica; cursor: hand; }
#sBar div.trial { padding: 0px; margin: 0px; float: none;}
#sBar div.trial img { float: right;}
[/code]
HTML Koden:
[code]
<html>
<head>
<link href="style2.css" rel="stylesheet" type="text/css" media="screen" />
[removed][removed]
[removed]
$(document).ready(function ()
{
//Tittar ifall muspekaren hålls över menuItem_siffra
$('*[id^=menuItem_]').hover(function()
{
//Hämtar siffran efter menuItem_
var itemIDMatch = $(this).attr('id').match(/menuItem_([0-9]*)/);
//kontrollerar ifall det blev någon träff
if(itemIDMatch[1])
{
//itemID har nu värdet från menuItem_
var itemID = itemIDMatch[1];
//Gömmer den förra undermenyn
$('.active').removeClass('active').addClass('inactive');
//Visar den nya undermenyn
$('#submenuItem_' + itemID).removeClass('inactive').addClass('active');
}
});
});
[removed]
<style type="text/css">
.active
{
display: block;
}
.inactive
{
display: none;
}
</style>
</head>
<body>
<div id="menuHolder">
<ul>
<li id="menuItem_0"><a href="#">Start</a></li>
<li id="menuItem_1"><a href="#">Kontakta oss</a></li>
<li id="menuItem_2"><a href="#">Forum</a></li>
<li id="menuItem_3"><a href="#">Partners</a></li>
<li id="menuItem_4"><a href="#">Sallad</a></li>
<li id="menuItem_5"><a href="#">Smått och gott</a></li>
</ul>
</div>
<div id="submenuHolder">
<ul id="submenuItem_0" class="active">
<li><a href="#">Om oss</a></li>
</ul>
<ul id="submenuItem_1" class="inactive">
<li><a href="#">Bilder</a></li>
<li><a href="#">Spel</a></li>
<li><a href="#">Nyheter</a></li>
<li><a href="#">Smått & Gott</a></li>
</ul>
</div>
</body>
</html>
[/code]
Kodapa
