表示後にチャットリンクを表示する方法：なし、表示：ホバー

Question

親がマウスオーバーした場合にのみ表示される子リンクナビメニューがあります。私はDisplay：Noneを使い、次に：Hover Displayを使いたいと思っています.Child Linksの1つが訪問（Clicked On）されるとChild Linksメニューが表示されます。

私はここで手伝いをしていますが、ナビメニューがちらつくことがないように、HTML画面を最小化してください。

https://jsfiddle.net/omq2ky0v/

 html { 
     padding: 0; 
     margin: 0; 
     background-color: #efe; 
    } 

    a:link, 
    a:visited { 
     text-decoration: none; 
    } 

    /* Standard Nav Menu */ 
    .site-nav ul { 
     margin: 0; 
     padding: 0; 
    } 

    .site-nav ul:before, .site-nav ul:after { content: ""; display: table; } 
    .site-nav ul:after { clear: both; } 
    .site-nav ul { *zoom: 1; } 

    .site-nav ul li { 
     list-style: none; 
     display: inline-block; 
    } 


    .site-nav ul li a:link, 
    .site-nav ul li a:visited { 
     display: block; 
    } 


    /* Clearfix */ 
    .clearfix:before, .clearfix:after { content: ""; display: table; } 
    .clearfix:after { clear: both; } 
    .clearfix { *zoom: 1; } 

    /* Children Links */ 

    .page_item_has_children:hover .children { 
    display: block;} 

    .page-item:hover {text-decoration: none;} 
    .children { 
     display: none; 
    } 


    .children-links { 
     margin-bottom: 20px; 
     font-size: 80%; 
    } 

    .children-links a:link, 
    .children-links a:visited { 
     text-decoration: none; 
     padding-bottom: 2px; 
    } 

    .children-links ul { 
     float: left; 
    } 

    .children-links li { 
     margin-right: 20px; 
    } 

    .children-links .parent-link { 
     float: left; 
     margin-right: 20px; 
     padding-right: 20px; 
     border-right: 1px solid #DDD; 
     font-size: 120%; 

Answer 1

親がそのクラスを持っている場合チャイルズクラスactiveをクリックし、CSS永久ショー経由で親を与えます

.page_item.active > .children > .page_item{ 
    display: block; 
} 

あなたは体のどこかをクリックした場合、親からクラスactiveを削除して、子どもが消滅するようにします。

$('document').on('mousedown', function(oEvent){ 
    // check if navigation is open and if one of the childs is clicked, and do stuff 
    $(oEvent.currentTarget) .... 
}); 

Answer 2

uは試すことができます。この

.current_page_ancestor：訪問+ ul.children {表示：ブロック 重要。 }

私も以前のコードでjsFiddleでこれを試しました。私はその第二のブロックを置く

enter code herehttps://jsfiddle.net/omq2ky0v/8/