DropDown-Menu应该在onClick之后保持打开状态

Question

我的主页 - 菜单点“软件”应该保持打开，如果你点击它！

请参阅我的Test-Homepage！

我已经测试过将“li：focus”和“li：active”添加到我最低的CSS-Tag中，但没有任何效果。我也尝试过使用jQuery，但没有成功！

HTML代码：

<nav id="cNav">
    <div class="Nav">
        <ul>
            <li><a href="/">G</a></li>
            <li><a href="/">Home</a></li>
            <li><a href="/">Software</a>
                <ul>
                    <li><a href="sw/android/">Android</a></li>
                    <li><a href="sw/windows/">Windows</a></li>
                </ul>
            </li>
            <li><a href="about/">&Uuml;ber</a></li>
        </ul>
    </div>
</nav>

CSS代码：

#cNav {
    background-color: rgb(5, 90, 160);

    margin: 0;
    padding: 0;

    width: 100%;
}

.Nav {
    font-weight: bold;
    font-size: 22pt;

    margin: 0;
    padding: 0;
}

.Nav ul {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;

    position: relative;

    width: 100%;

    text-align: center;
}

.Nav ul li {
    display: inline-block;  
    position: relative;

    padding-left: 2em;
    padding-right: 2em;

    padding-top: 0.4em;
    padding-bottom: 0.4em;
}

.Nav ul li a {
    outline: 0;

    color: white;

    position: relative;

    text-decoration: none;

    transition: color 0.3s;
}

.Nav ul li a::after {
    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    height: 4px;

    background: white;

    content: '';

    opacity: 0;

    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;

    -moz-transition: opacity 0.3s, -moz-transform 0.3s;

    transition: opacity 0.3s, transform 0.3s;

    -webkit-transform: translateY(10px);

    -moz-transform: translateY(10px);

    transform: translateY(10px);

    margin: 0;
}

.Nav ul li a:hover::after { 
    opacity: 1;

    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}

.Nav ul ul {
    display: none;
    white-space: nowrap;        
    position: absolute;

    text-align: center;

    top: 100%;

    margin-left: -5.3em;
}

.Nav ul ul li {     
    background-color: rgb(5, 90, 160);      
    border-top: medium solid rgba(0,115,209,1.00);

    margin-right: -1em;
}

.Nav ul li:hover > ul {
    display: block;
}

Answer 1

如果你想让你的主页菜单点“软件”保持打开，如果你点击它，并且你想使用jQuery，这可能是一个可能的解决方案：

使用软件向li添加ID：

<li id="software"><a href="/">Software</a>

然后你可以用它来设置ul的css display属性来阻止：

$(document).ready(function() {
    $("#software ul").click(function() {
        $(this).css("display", "block");
    });
});

段：

$(document).ready(function() {
  $("#software ul").click(function() {
    $(this).css("display", "block");
  });
});

#cNav {
    background-color: rgb(5, 90, 160);

    margin: 0;
    padding: 0;

    width: 100%;
}

.Nav {
    font-weight: bold;
    font-size: 22pt;

    margin: 0;
    padding: 0;
}

.Nav ul {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;

    position: relative;

    width: 100%;

    text-align: center;
}

.Nav ul li {
    display: inline-block;  
    position: relative;

    padding-left: 2em;
    padding-right: 2em;

    padding-top: 0.4em;
    padding-bottom: 0.4em;
}

.Nav ul li a {
    outline: 0;

    color: white;

    position: relative;

    text-decoration: none;

    transition: color 0.3s;
}

.Nav ul li a::after {
    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    height: 4px;

    background: white;

    content: '';

    opacity: 0;

    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;

    -moz-transition: opacity 0.3s, -moz-transform 0.3s;

    transition: opacity 0.3s, transform 0.3s;

    -webkit-transform: translateY(10px);

    -moz-transform: translateY(10px);

    transform: translateY(10px);

    margin: 0;
}

.Nav ul li a:hover::after { 
    opacity: 1;

    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}

.Nav ul ul {
    display: none;
    white-space: nowrap;        
    position: absolute;

    text-align: center;

    top: 100%;

    margin-left: -5.3em;
}

.Nav ul ul li {     
    background-color: rgb(5, 90, 160);      
    border-top: medium solid rgba(0,115,209,1.00);

    margin-right: -1em;
}

.Nav ul li:hover > ul {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="cNav">
    <div class="Nav">
        <ul>
            <li><a href="/">G</a></li>
            <li><a href="/">Home</a></li>
            <li id="software"><a href="/">Software</a>
                <ul>
                    <li><a href="sw/android/">Android</a></li>
                    <li><a href="sw/windows/">Windows</a></li>
                </ul>
            </li>
            <li><a href="about/">&Uuml;ber</a></li>
        </ul>
    </div>
</nav>