ul#sections-menu, #sections-menu ul { margin: 0; padding: 0; list-style: none; font-size: 12px;
}
#sections-menu { max-width: 82%;
}
.tag-menu-custom._small { max-height: 34px; overflow: hidden; position: relative;
}
#sections-menu li.root-item, #sections-menu li.root-item-selected { position: relative; display: inline-block; text-align: center; padding: 2px;
}
#sections-menu li { margin: 0 10px;
}
.tag-custom { display: flex;
}
/* здесь скрытый элемент */
#sections-menu__subsection {max-height: 100% !important;}
#sections-menu li ul { position: absolute; z-index: 500; height: auto; margin: 0; top: 34px; left: -11px;
}
#sections-menu li a { box-sizing: border-box; font-size: 12px; line-height: 1.083; margin-bottom: 3px; padding: 0 10px 7px; text-transform: uppercase; text-decoration: none;
}
#sections-menu li.root-item ul { border-radius: 3px; background: linear-gradient(to right, #087E78 0%, #6DA86E 100%); background-color: #6DA86E; background-repeat: repeat-y; color: #FFF; box-shadow: 0 1px 2px #EBEBEB; overflow: hidden;
}
/* здесь скрытый элемент */
/* Основное меню остается свернутым */
.tag-menu-custom._small { max-height: 34px; overflow: hidden; position: relative; /* Для корректного позиционирования подменю */
}
/* НО: подменю может выходить за границы */
.tag-menu-custom._small .root-item { position: static; /* Сбрасываем позиционирование для родителя */
}
.tag-menu-custom._small .sub-item.row { /* Подменю выходит из потока и игнорирует overflow родителя */ position: fixed !important; /* Или absolute, если меню не скроллится */ z-index: 10000 !important; top: auto !important; bottom: auto !important; left: auto !important; /* Альтернатива: вычисляем позицию через JS, но попробуем CSS */ display: none; /* По умолчанию скрыто */
}
/* Показываем подменю при hover */
.tag-menu-custom._small .root-item:hover .sub-item.row { display: flex !important; /* Позиционируем относительно viewport, а не родителя */ position: fixed !important; background: white; border: 1px solid #ddd; box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* ========== ВАЖНО: Правило для третьего меню ========== */
/* По умолчанию третье меню скрыто */
#tag-category-custom { display: none !important;
}
/* Показываем третье меню, когда второе меню открыто (не имеет класса ._small) */
#tag-brand-custom:has(.tag-menu-custom:not(._small)) + #tag-category-custom { display: block !important;
}
/* */
#sections-menu li:hover ul,
#sections-menu li.jsvhover ul,
#sections-menu li li:hover ul,
#sections-menu li li.jsvhover ul,
#sections-menu li li li:hover ul,
#sections-menu li li li.jsvhover ul { display: flex; padding: 10px 10px 10px 0; width: 350px;
}
ul#sections-menu,
#sections-menu ul { margin: 0; padding: 0; list-style: none; font-size: 12px;
}
#sections-menu li { margin: 0 10px;
}
#sections-menu li a { box-sizing: border-box; font-size: 12px; line-height: 1.083; margin-bottom: 3px; padding: 0 10px 7px; text-transform: uppercase; display: block; text-decoration: none;
}
#sections-menu li.root-item,
#sections-menu li.root-item-selected { position: relative; display: inline-block; text-align: center; padding: 2px;
}
#sections-menu li.root-item-selected > a { background: #6DA86E;
}
#sections-menu li ul { position: absolute; display: none; z-index: 500; height: auto; margin: 0; top: 34px; left: -11px;
}
#sections-menu li ul li a { text-align: left;
}
#sections-menu .root-item-selected ul li a.item-selected { background-color: #D6D6D6; color: #525252; margin: 0 3px;
}
#sections-menu li:last-child { float: none;
}
#sections-menu__subsection li { float: left; position: relative; display: table; text-align: center; padding: 2px;
}
#sections-menu__subsection li a { display: table-cell; font-size: 11px; text-transform: uppercase; vertical-align: middle; line-height: 0.727;
}
#sections-menu__subsection li a:hover div,
#sections-menu__subsection li a.select div { background: #6DA86E;
}
#sections-menu__subsection li a:hover div::before,
#sections-menu__subsection li a.select div::before { border-right-color: #6DA86E;
}
#sections-menu__subsection li a:hover div::after,
#sections-menu__subsection li a.select div::after { border-left-color: #6DA86E;
}
#sections-menu a.root-item-selected { background: linear-gradient(to right, #087E78 0%, #6DA86E 100%); background-color: #6DA86E; background-repeat: repeat-y; color: #FFF; box-shadow: 0 1px 2px #EBEBEB;
}
#sections-menu a.parent { background: #F5F5F5 url(/local/templates/profparket_10.2019/../images/arrow.gif) center right no-repeat; padding-right: 10px;
}
#sections-menu li:hover ul,
#sections-menu li.jsvhover ul,
#sections-menu li li:hover ul,
#sections-menu li li.jsvhover ul,
#sections-menu li li li:hover ul,
#sections-menu li li li.jsvhover ul { display: flex; padding: 10px 10px 10px 0; width: 350px;
}
#sections-menu li.root-item ul { border-radius: 3px; background: linear-gradient(to right, #087E78 0%, #6DA86E 100%); background-color: #6DA86E; background-repeat: repeat-y; color: #FFF; box-shadow: 0 1px 2px #EBEBEB; overflow: hidden;
}
#sections-menu li.root-item ul li { margin: 0;
}
#sections-menu li.root-item ul li a { color: #FFF; margin-bottom: 0; text-transform: none; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.tag-brand-custom { padding-top: 15px;
}