У меня есть многоуровневое вложенное меню. Вызов вложенного меню происходит по клику. Обработка клика только на 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;}
........................................................................................
Ребята подскажите, пожалуйста.
Простой
