Как правильно на css определить вывод подменю 3-го уровня на маленьком экране?

У меня есть многоуровневое вложенное меню. Вызов вложенного меню происходит по клику. Обработка клика только на CSS. На большом экране показывается и работает все хорошо. Но на маленьком экране вызов элементов подменю вложенного меню (при клике на SubMenuItem_1) не показывается нормально - фон подменю остается таким же как и на большом экране и поверх него накладывается фон страницы. Как правильно ввести подменю 3-го уровня (при клике на SubMenuItem_1) на маленьком экране. Как это указать на CSS ?

Фрагмент main.php:

<nav class="navbar navbar-default navbar-fixed-top navbar">
        <div class="container" style="position:relative;">
           ............................................................
            <div class="navbar-collapse collapse" id="m_menu-collapse">
                <ul class="nav navbar-nav">
                    <li class="nav-m-link"><a href="<?= Yii::$app->homeUrl ?>">Главная</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" id="dropdown1" data-toggle="dropdown" role="button" aria-haspopup="false" aria-expanded="false">
                              MenuItem
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu icon-color" aria-labelledby="dropdown1">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" id="dropdown1-1" data-toggle="dropdown" role="button" aria-haspopup="false" aria-expanded="false">
                                    SubMenuItem_1
                                    <span class="caret"></span>
                                </a>
                                <ul class="dropdown-menu"  aria-labelledby="dropdown1-1">
                                    <li><a href="*">Item_1</a></li>
                                    <li><a href="*">Item_2</a></li>
                                </ul>
                            </li>
                            <li><a href="*">SubMenuItem_2</a></li>
                        </ul>
                    </li>
         ...........................................................................................

Фрагмент style.css:

.navbar {min-height:40px;height:40px;}
.navbar-brand {height:40px;padding:8px 10px;}

.navbar-default {background-color:#b5c5ff;}
.navbar-collapse.collapse, .navbar-collapse.collapsing {background-color:#b5c5ff;border-color:#b5c5ff !important;}
.navbar-default .navbar-nav > li > a {color: #484747;}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background-color:#99afff;
}
.nav > li > a:hover, .nav > li > a:focus {background-color:#99afff;}

.dropdown-menu:hover { display: block;}
.dropdown-menu .dropdown-menu {
	left: 100%;
	margin: 0;
	right: auto;
	top: -1px;
}


@media (min-width: 768px) {
    .navbar-nav > li > a {padding-top:10px;padding-bottom:10px;}
    .navbar-collapse.collapse {display: inline-block !important;border-bottom:1px solid #e7e7e7;height:40px !important;}
    .nav-m-link {display:none !important;}
    .menu_setting {margin-top:17px;}
}
@media (max-width: 767px) {
    .navbar-brand {display:none;}
    .navbar-header {display:inline-block;}
    .navbar-collapse {margin-top:-6px;}
    .navbar-nav > li > a {padding:10px 7px !important;}
........................................................................................

Ребята подскажите, пожалуйста.