DropDown-Menu should stay opend after onClick - html

Question

My Homepage-Menu-Point "Software" should stay opened if you click on it!
See on my Test-Homepage!
I've tested to add "li:focus" and "li:active" to my lowermost CSS-Tag, but nothing worked. I also tried it with jQuery, without success!
The HTML-Code:
<nav id="cNav">
<div class="Nav">
<ul>
<li>G</li>
<li>Home</li>
<li>Software
<ul>
<li>Android</li>
<li>Windows</li>
</ul>
</li>
<li>Über</li>
</ul>
</div>
</nav>
The CSS-Code:
#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

If you want your Homepage-Menu-Point "Software" staying opened if you click on it, and you want to use jQuery, this might be a possible solution:
Add an id to the li with software:
<li id="software">Software
Then you can use this to set the css display property of the ul to block:
$(document).ready(function() {
$("#software ul").click(function() {
$(this).css("display", "block");
});
});
Snippet:
$(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>G</li>
<li>Home</li>
<li id="software">Software
<ul>
<li>Android</li>
<li>Windows</li>
</ul>
</li>
<li>Über</li>
</ul>
</div>
</nav>