Toggle Dropdown Menu, Help Please

Question

I have this CSS below, and it works like a charm for what it's supposed to do, but I noticed that the dropdown menu only comes down when the mouse hovers over the button. I want it so that it only drops down when clicked on, allowing the user to toggle the menu off and on. The menu and dropdown menu I'm talking about only shows up on my phone layout of the site. How do I make this dropdown menu drop on toggle instead of mouse hover.
.phonemenuwrap {
    width:100%;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    background:#3e3436;
.phonemenu {
    width:100%;
    margin:0px auto;
    background:#89181A;
.phonemenu li {
    margin:0px;
    width:100%;
    list-style:none;
    font-family:Arial, Helvetica, sans-serif;
    background:#2e2728;
.phonemenu a {
    transition:all linear 0.15s;
    color:#919191;
.phonemenu li:hover > a, .phonemenu .current-item > a {
    text-decoration:none;
    color:#be5b70;
.phonemenu .arrow {
    font-size:11px;
    line-height:0%;
/*----- Top Level -----*/
.phonemenu > ul > li {
    float:left;
    display:inline-block;
    position:relative;
    font-size:19px;
.phonemenu > ul > li > a {
    display:inline-block;
    text-shadow:0px 1px 0px rgba(0,0,0,0.4);
.phonemenu > ul > li:hover > a, .menu > ul > .current-item > a {
    width:100%;
    background:#2e2728;
/*----- Bottom Level -----*/
.phonemenu li:hover .sub-menu {
    z-index:1;
    opacity:1;
.sub-menu {
    width:100%;
    padding:5px 0px;
    position:absolute;
    top:100%;
    left:0px;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background:#2e2728;
.sub-menu li {
    width:100%;
    display:block;
    font-size:16px;
.sub-menu li a {
    padding:10px 30px;
    display:block;
.sub-menu li a:hover, .sub-menu .current-item a {
    background:#3e3436;
My site: Showcase Design & Build: Pinehurst, Fayetteville and Sanford Custom Home Builder

Answer 1

Hyde1216 wrote:
Still doesn't seem to be working, even after doing all of the above. The problem is still that the menu either stays dropped down, or it never gets dropped down.
Ok lets go through this again. I made an error in my orignal code and I now have had a better chance to unravel your css.
1) Comment out the css selector as shown below using /* */
.phonemenu li:hover .sub-menu {
z-index:1;
opacity:1;
2) Comment out the 'opacity: 0;' as shown below using /* */
.sub-menu {
    width:100%;
    padding:5px 0px;
    position:absolute;
    top:100%;
    left:0px;
    z-index:-1;
    /* opacity:0; */
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background:#2e2728;
3) Add the jQuery framework library and script - copy the below code and paste it into your pages code directly before your closing </head> tag. (NOTE: I have added - $('.sub-menu').hide(); - to hide the submenu when the page loads).
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$('.sub-menu').hide();
$('.openMobileMenu').click(function() {
$('.sub-menu').toggle();
</script>
4) Add class="openMobileMenu" to the a tag which is wrapping your 'dropdown.png' image, as shown below.
<a href="#" class="openMobileMenu"><img src="images/dropdown.png" width="36" height="27" alt="Dropdown"><span class="arrow">&#9660;</span></a>
Thats it - your phone menu should now toggle when the hamburger icon is clicked.
EDITED: ALSO don't use a minus z-index for the 'sub-menu' - use a higher number like 10, as shown:
.sub-menu {
    width:100%;
    padding:5px 0px;
    position:absolute;
    top:100%;
    left:0px;
    z-index: 10;
    /* opacity:0; */
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background:#2e2728;