リンク「meist」がクリックされたかどうかを確認し、クリックされた場合はサブメニューを submeist に変更します。マウスをホバーアウトすると、自動的にサブメニューに戻ります
サブメニューで何かをクリックしたいときにサブメニューが消えてしまいますが、それに対する修正もわかりませんでした。
HTML
<ul id="menüü">
<li id="meist">
<p><a href="meist.html">Meist</a></p>
</li>
<li id="seadmed">
<p><a href="seadmed.html">Seadmed</a></p>
</li>
</ul>
<div id="submenu">
<ul id="submeist">
<li class="asi1">
Asi 1
</li>
<li class="asi2">
Asi 2
</li>
<li class="asi3">
Asi 3
</li>
</ul>
<ul id="subseadmed">
<li class="item1">
Item 1
</li>
<li class="item2">
Item 2
</li>
<li class="item3">
Item 3
</li>
</ul>
</div>
CSS
#meist {
display: inline;
float:left;
width:180px;
height:50px;
color:#191919;
text-align:center;
overflow:hidden;
background:#990000;
-moz-border-radius-top-left: 50px;
border-top-left-radius: 50px;
}
#meist:hover {
text-decoration: underline;
color: white;
font-size: 17.5px;
line-height: 15px;
}
#seadmed {
display: inline;
float:left;
width:180px;
height:50px;
color:#191919;
text-align:center;
overflow:hidden;
background:#990000;
}
#seadmed:hover {
text-decoration: underline;
color: white;
font-size: 17.5px;
line-height: 15px;
}
#submenu {
color:white;
height:25px;
width:900px;
background:#630000;
margin-top:50px;
}
#submeist {
display:none;
font-size:12px;
}
#submeist .asi1 {
margin-left:70px;
height:25px;
width:75px;
}
#submeist .asi2 {
margin-left:25px;
}
#submeist .asi3 {
margin-left:25px;
}
#subseadmed {
display:none;
font-size:12px;
}
#subseadmed .item1 {
margin-left:70px;
height:25px;
width:75px;
}
#subseadmed .item2 {
margin-left:25px;
}
#subseadmed .item3 {
margin-left:25px;
}
JS
$(document).ready(function () {
$("#meist").mouseleave(function () {
$("#submeist").hide();
return false;
});
$("#meist").mouseenter(function () {
$("#submeist").show();
return false;
});
$("#seadmed").mouseleave(function () {
$("#subseadmed").hide();
return false;
});
$("#seadmed").mouseenter(function () {
$("#subseadmed").show();
return false;
});
});