0
  1. リンク「meist」がクリックされたかどうかを確認し、クリックされた場合はサブメニューを submeist に変更します。マウスをホバーアウトすると、自動的にサブメニューに戻ります

  2. サブメニューで何かをクリックしたいときにサブメニューが消えてしまいますが、それに対する修正もわかりませんでした。

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;
    });
});
4

1 に答える 1