Need to change the menu dropdown from hover to onclick: i have attached the css and the html code i have also attached the working fiddle https://jsfiddle.net/prabashanash/wafp2bae/
#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:hover ul {
/*width: 19%;*/
position: static;
display: block;
right: 244px;
top: 50px;
float: right;
}
<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>
See Question&Answers more detail:os