how to change dropdwon from hover to onclick

Need to change the dropdown from hover to click

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="navContainer">
    <ul>
        <li><span><a href="#">Home</a></span>
        </li>
        <li>
            <span><a href="#">About </a></span>
            <ul>
                <li><a href="#">Our business</a>
                </li>
                <li><a href="#">Our History </a>
                </li>
            </ul>
        </li>
        <li>
            <span><a href="#">Services</a></span>
            <ul>
                <li><a href="#">Web Design</a>
                </li>
                <li><a href="#">Web templates </a>
                </li>
                <li><a href="#">Tutorials </a>
                </li>
            </ul>
        </li>
        <li><span><a href="#">Contact</a></span>
        </li>
        <li><span><a href="#">News</a></span>
        </li>

        <li>
            <span><a href="#">Services</a></span>
            <ul>
                <li><a href="#">Web Design</a>
                </li>
                <li><a href="#">Web templates </a>
                </li>
                <li><a href="#">Tutorials </a>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

#navContainer {
    margin: 41px 0 0 0px;
    padding: 0;
    background: #424445;
    /* border: 1px solid #7398ba; */
    
    text-align: center;
    width: 100%;
}
#navContainer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#navContainer ul li {
    position: relative;
}
#navContainer ul li span {
    display: block;
}
#navContainer ul li a {
    text-decoration: none;
    color: white;
    display: block;
    padding: 8px;
}
#navContainer ul li span:hover {
    /*background: pink;*/
}
#navContainer ul li a:hover {
    background: black;
}
#navContainer ul ul {
    position: absolute;
    display: none;
}
#navContainer ul ul li a {
    background: #bec8cb;
}
#navContainer ul li.open ul {
    /*width: 19%;*/
    
    position: static;
    display: block;
    right: 244px;
    top: 50px;
    float: right;
}

JavaScript

$( "#navContainer ul li" ).click(function() {
  $(this).siblings().removeClass('open');
  $( this ).toggleClass("open")
});