Bootstrap nav with hover submenu on mobile

Question

I am trying to get my Nav Submenu working on mobile with Bootstrap 3.2.0.

Right now the submenu is working fine on desktop browsers but not on mobile. When I click a link to open dropdown menu on mobile it opens the dropdown, when I click anywhere else the dropdown closes. So the problem is when I click a link with a submenu the whole dropdown closes and I can't see any of the links that need to be seen.

I've tried a few workarounds but nothing seems to be working.

Any help would be greatly appreciated. If anything I'm saying is unclear please feel free to ask.

Here is the HTML and CSS(for the hover dropdown)

HTML:

<ul class="nav navbar-nav">
    <li class='GeneralInfo dropdown'>
        <a href='#' class='dropdown-toggle' data-toggle='dropdown'><span class='glyphicon glyphicon-tasks navDown'></span>General Info</a>
        <ul class='dropdown-menu' role='menu'>
            <li><a href='/email_list.php'>Employee Directory</a></li>
            <li><a href='/docs.php'>Documents</a></li>
            <li><a href='/ftp.php'>FTP</a></li>
            <li><a href='/manage/'>Manage</a></li>
            <li><a href='/flyspray'>Bug/Feature Tracking</a></li>
        </ul>
    </li>
    <li class='JobInfo dropdown'>
        <a href='#' class='dropdown-toggle' data-toggle='dropdown'><span class='glyphicon glyphicon-info-sign navDown'></span>Job Info</a>
        <ul class='dropdown-menu' role='menu'>
            <li><a href='/job/list'>Job List</a></li>
            <li><a href='/files_required.php'>Files Rqrd</a></li>
            <li><a href='/incoming_list.php'>Incoming Data List</a></li>
            <li class='dropdown-submenu'>
                <a tabindex='-1' href='javascript:void(0)'>Signoffs</a>
                <ul class='dropdown-menu signoffDropdown'>
                    <li><a href='signoff.php?dep=Workorders'>Workorders</a></li>
                    <li><a href='signoff.php?dep=CNC'>CNC</a></li>
                </ul>
            </li>
            <li><a href='/leader_list2.php'>Leader List</a></li>
            <li><a href='/milestones'>Milestone/Timelines</a></li>
        </ul>
    </li>
    <li class='QIRInfo dropdown'>
        <a href='#' class='dropdown-toggle' data-toggle='dropdown'><span class='glyphicon glyphicon-eye-open navDown'></span>QIR Info</a>
        <ul class='dropdown-menu' role='menu'>
            <li><a href='/open_qir.php'>Open QIRs</a></li>
            <li><a href='/qir'>Search QIR</a></li>
        </ul>
    </li>
</ul>   

Submenu CSS:

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu{
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #333;
    margin-top: 5px;
}

.dropdown-submenu>a:hover:after {
    border-left-color: #fff;
}

.dropdown-submenu > ul > li {
    font-size: 1.15em;
}

@media (max-width:768px){
    .dropdown-submenu > ul > li {
        margin-left: 15px;
    }
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

JS:

//SIGNOFFS DROPDOWN
$('.dropdown-toggle').on('hide.bs.dropdown', function () {
    return false;
});

Thanks in advance for any and all help!

Answer 1

Seems like your issue is possibly a duplicate to this one here:

Keep Bootstrap Dropdown Open When Clicked Off

The issue I'm linking to doesn't state that it's only on mobile, but hoping the solution provided may apply to your issue as well. Good luck!