如何在显示后访问后显示子链接：无，显示：悬停

Question

我有一个子链接导航菜单，仅在父母悬停时显示。所以我使用Display：None，然后a：Hover Display，我想要的是，一旦访问了一个子链接（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%;