<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="dropdown"> <ul class="dropdown-menu"> <li><a href="#">1-й уровень</a></li> <li> <a tabindex="-1" href="#">1-й уровень</a> <ul class="dropdown-menu"> <li><a href="#">2-й уровень здесь будет очень длинный текст, который зачем-то написали</a></li> <li class="dropdown-submenu"> <a tabindex="-1" href="#">2-й уровень</a> <ul class="dropdown-menu"> <li><a href="#">3-й уровень</a></li> <li><a href="#">3-й уровень</a></li> </ul> </li> </ul> </li> <li class="dropdown-submenu"> <a tabindex="-1" href="#">1-й уровень</a> <ul class="dropdown-menu"> <li><a href="#">2-й уровень</a></li> <li><a href="#">2-й уровень</a></li> <li><a href="#">2-й уровень</a></li> <li><a href="#">2-й уровень</a></li> <li><a href="#">2-й уровень</a></li> <li><a href="#">2-й уровень</a></li> <li><a href="#">2-й уровень</a></li> <li><a href="#">2-й уровень</a></li> </ul> </li> </ul> </div> </div> <div class="row"> <div class="dropdown"><ul id="menu-o-centre" class="dropdown-menu"><li id="menu-item-3931" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown-submenu menu-item-3931"><a href="https://semyabalakovo.ru/centrsemya##">Информация о поставщике социальных услуг</a> <ul class="dropdown-menu"> <li id="menu-item-3934" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3934"><a href="https://semyabalakovo.ru/pasport-postavshhika-socialnyx-uslug">Паспорт поставщика социальных услуг</a></li> <li id="menu-item-3935" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3935"><a href="https://semyabalakovo.ru/informaciya-ob-uchreditele">Информация об учредителе</a></li> <li id="menu-item-3936" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3936"><a href="https://semyabalakovo.ru/gosudarstvennoe-zadanie">Государственное задание</a></li> <li id="menu-item-3937" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3937"><a href="https://semyabalakovo.ru/informaciya-o-chislennosti-poluchatelej-uslug">Информация о численности получателей услуг</a></li> <li id="menu-item-3938" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3938"><a href="https://semyabalakovo.ru/informaciya-ob-obyome-uslug">Порядок предоставления социальных услуг, образец договора</a></li> </ul> </li> <li id="menu-item-3933" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown-submenu menu-item-3933"><a href="#">Документы</a> <ul class="dropdown-menu"> <li id="menu-item-3939" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3939"><a href="https://semyabalakovo.ru/uchreditelnye-dokumenty">Учредительные документы, локальные акты</a></li> <li id="menu-item-3940" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3940"><a href="https://semyabalakovo.ru/dokumenty-o-gosudarstvennoj-registracii">Документы о государственной регистрации</a></li> <li id="menu-item-3941" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3941"><a href="https://semyabalakovo.ru/informaciya-o-nalichii-licenzii">Информация о наличии лицензии</a></li> </ul> </li> <li id="menu-item-3942" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown-submenu menu-item-3942"><a href="#">Информация об учреждении</a> <ul class="dropdown-menu"> <li id="menu-item-3943" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3943"><a href="https://semyabalakovo.ru/informaciya-o-rukovoditelyax">Информация о руководителях</a></li> <li id="menu-item-3944" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3944"><a href="https://semyabalakovo.ru/struktura-i-organy-upravleniya">Структура учреждения</a></li> <li id="menu-item-3945" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3945"><a href="https://semyabalakovo.ru/materialno-texnicheskoe-obespechenie">Контактная информация</a></li> <li id="menu-item-3946" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3946"><a href="https://semyabalakovo.ru/opyt-raboty-uchrezhdeniya">Персональный состав работников</a></li> <li id="menu-item-3947" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3947"><a href="https://semyabalakovo.ru/plan-fxd">Финансово-хозяйственная деятельность</a></li> <li id="menu-item-3948" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3948"><a href="https://semyabalakovo.ru/informaciya-o-nalichii-predpisanij">Информация о наличии предписаний</a></li> </ul> </li> <li id="menu-item-3949" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3949"><a href="https://semyabalakovo.ru/category/news-department">Новости учреждения</a></li> <li id="menu-item-3950" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown-submenu menu-item-3950"><a href="#">COVID-19</a> <ul class="dropdown-menu"> <li id="menu-item-3951" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3951"><a href="https://semyabalakovo.ru/media-plan">Меры профилактики</a></li> <li id="menu-item-3952" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3952"><a href="https://semyabalakovo.ru/dekadnye-meropriyatiya">Социальная помощь</a></li> </ul> </li> <li id="menu-item-3953" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown-submenu menu-item-3953"><a href="#">Семейные онлайн-выходные</a> <ul class="dropdown-menu"> <li id="menu-item-3954" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3954"><a href="https://semyabalakovo.ru/klub-1">Программа Школа «Эконом»</a></li> <li id="menu-item-3955" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3955"><a href="https://semyabalakovo.ru/klub-3">Профилактический клуб «Шире круг»</a></li> <li id="menu-item-3956" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3956"><a href="https://semyabalakovo.ru/klub-2">Программа «Идеи для интерьера и подарка «Вдохновение»</a></li> <li id="menu-item-3957" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3957"><a href="https://semyabalakovo.ru/klub-4">Клуб «Эффективный родитель»</a></li> </ul> </li> <li id="menu-item-3960" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown-submenu menu-item-3960"><a href="#">Образовательная деятельность</a> <ul class="dropdown-menu"> <li id="menu-item-3961" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3961"><a href="https://semyabalakovo.ru/obrazovatelnye-programmy">Общая информация об учреждении</a></li> <li id="menu-item-3962" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3962"><a href="https://semyabalakovo.ru/lokalnye-normativnye-akty">Информация о руководителях</a></li> <li id="menu-item-3973" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3973"><a href="https://semyabalakovo.ru/svedeniya-o-personalnom-sostave-pedagogicheskix-rabotnikov">Сведения о персональном составе педагогических работников</a></li> <li id="menu-item-3975" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3975"><a href="https://semyabalakovo.ru/obespechenie-dostupnosti-informacii-o-deyatelnosti-uchrezhdeniya">Обеспечение доступности информации о деятельности учреждения</a></li> <li id="menu-item-3977" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3977"><a href="https://semyabalakovo.ru/polozhenie-o-strukturnom-podrazdelenii">Положения о структурных подразделениях</a></li> <li id="menu-item-3979" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3979"><a href="https://semyabalakovo.ru/svedeniya-o-chislennosti-obuchayushhixsya">Сведения о численности обучающихся. Количество вакантных мест для приёма</a></li> <li id="menu-item-3981" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3981"><a href="https://semyabalakovo.ru/svedeniya-o-realizuemyx-programmax">Сведения о реализуемых программах</a></li> <li id="menu-item-3982" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3982"><a href="https://semyabalakovo.ru/licenziya-na-osushhestvleniya-obrazovatelnoj-deyatelnosti">Лицензия на осуществление образовательной деятельности</a></li> <li id="menu-item-3984" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3984"><a href="https://semyabalakovo.ru/dopolnitelnye-obrazovatelnye-uslugi">Выражение мнений получателей образовательных услуг</a></li> <li id="menu-item-3986" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3986"><a href="https://semyabalakovo.ru/usloviya-oxrany-zdorovya-obuchayushhixsya">Условия охраны здоровья обучающихся</a></li> <li id="menu-item-3988" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3988"><a href="https://semyabalakovo.ru/materialno-texnicheskoe-obespechenie-i-osnashhennost-obrazovatelnogo-processa">Материально-техническое обеспечение и оснащенность образовательного процесса</a></li> <li id="menu-item-3990" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3990"><a href="https://semyabalakovo.ru/otchety-po-samoobsledovaniyu">План финансово-хозяйственной деятельности. Информация о поступлении финансовых и материальных средств и об их расходовании</a></li> </ul> </li> <li id="menu-item-3959" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3959"><a href="https://semyabalakovo.ru/telefon-doveriya">Телефон доверия</a></li> <li id="menu-item-3963" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3963"><a href="https://semyabalakovo.ru/obrazovatelnye-standarty">Антикоррупционная политика</a></li> <li id="menu-item-3964" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3964"><a href="https://semyabalakovo.ru/pedagogicheskij-sostav">Независимая оценка качества</a></li> <li id="menu-item-3965" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown-submenu menu-item-3965"><a href="#">Информационно-образовательная площадка</a> <ul class="dropdown-menu"> <li id="menu-item-3966" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3966"><a href="https://semyabalakovo.ru/kabinet-1">Школа парикмахерского искусства «Эконом»</a></li> <li id="menu-item-3967" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3967"><a href="https://semyabalakovo.ru/kabinet-2">Идеи для интерьера и подарка «Вдохновение»</a></li> <li id="menu-item-3968" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3968"><a href="https://semyabalakovo.ru/kabinet-3">Программа «Талисман»</a></li> <li id="menu-item-3969" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3969"><a href="https://semyabalakovo.ru/kabinet-4">Клуб «Эффективный родитель»</a></li> <li id="menu-item-3970" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3970"><a href="https://semyabalakovo.ru/kabinet-5">Программа «Focus-студия»</a></li> <li id="menu-item-3971" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3971"><a href="https://semyabalakovo.ru/kabinet-6">Помощь психолога</a></li> </ul> </li> </ul></div> </div> <footer> <div class="container"> <div class="row"> <div class="col-sm-2">sfkjhsgjsfkjhsgjsfkjhsgjsfkjhsgj</div> <div class="col-sm-3">skjhdvc</div> <div class="col-sm-3">skdgfdjkdsh</div> <div class="col-sm-4">ajfhlgalhb</div> </div> </div> </footer> </div>

.dropdown ul { text-align:center; } .dropdown > ul{ position: relative; display:block; margin:20px; } .dropdown-submenu:hover > .dropdown-menu { display: block; } .dropdown-submenu { position: relative; } .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px 6px; border-radius: 0 6px 6px 6px; min-width:160px; } .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; } /* стилизация меню */ .dropdown-menu { background:none; border:none; box-shadow:none; } .dropdown a { background: #f7ad00;; color: white; text-decoration: none; transition: all 0.5s ease; font-family: 'Open Sans', sans-serif; font-weight: normal; /*border: 1px solid #424040;*/ box-shadow: 0px 5px 10px #f7ad00; border-radius: 150px; } .dropdown li { background: #f7ad00; margin-bottom: 10px; border-radius: 150px; } .dropdown li > a { background: #f7ad00; color: white; text-decoration: none; transition: all 0.5s ease; font-family: 'Open Sans', sans-serif; font-weight: normal; /*border: 1px solid #424040;*/ box-shadow: 0px 5px 10px #f7ad00; border-radius: 150px; } .dropdown li > a { padding: 10px; text-transform: none; width: 100%; box-sizing: border-box; } .dropdown li i { border-left: 3px solid transparent; border-bottom: 6px solid transparent; margin: 0; } .dropdown > ul li ul li > a { box-shadow: none; } .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color:white; background-color:#f7ad00; } .dropdown li a:hover { /*background: #dd570e; color: #ffffff; transition: all 0.5s ease;*/ -webkit-transform: translate(0, -3px); -moz-transform: translate(0, -3px); -o-transform: translate(0, -3px); -ms-transform: translate(0, -3px); box-shadow: none; transform: translate(0, -2px); /*box-shadow: 0px 3px 5px #f7ad00;*/ } /* **** */ .last ul, .last ol { list-style: none; } .last > ul { display: flex; flex-direction: column; } .last > ul li > a { display: block; background: #f7ad00;; color: white; text-decoration: none; transition: all 0.5s ease; font-family: 'Open Sans', sans-serif; font-weight: normal; /*border: 1px solid #424040;*/ box-shadow: 0px 5px 10px #f7ad00; border-radius: 150px; } .last > ul li ul li > a { box-shadow: none; } .last > ul li ul li > a:hover { box-shadow: 0px 5px 10px #f7ad00; transform: none; } @media screen and (min-width: 901px) { .dws-menu-1 > ul li > a { font-size: 15px; padding: 15px 20px 15px 20px; } .dws-menu-1 > ul li { min-width: 340px; width: 25%; } .dws-menu-1 li > ul li a { font-size: 13px; } .first > ul li > a { font-size: 15px; padding: 15px 20px 15px 20px; } .first > ul li { min-width: 340px; min-height: 30px; width: 25%; } .first li > ul li a { font-size: 13px; } .last > ul li > a { padding: 15px 20px 15px 20px; font-size: 15px; } .last > ul li { width: 25%; min-width: 340px; height: 30px; } .last li > ul li a { font-size: 13px; } .last ul li ul { bottom: -46px; } } @media screen and (min-width: 700px) and (max-width: 900px) { .dws-menu-1 > ul li > a { font-size: 11px; padding: 20px 12px 20px 12px; } .dws-menu-1 > ul li { min-width: 250px; height: 30px; width: 30%; } .dws-menu-1 li > ul li a { font-size: 11px; } .first > ul li > a { font-size: 11px; padding: 20px 12px 20px 12px; } .first > ul li { min-width: 250px; height: 30px; width: 30%; } .first li > ul li a { font-size: 11px; } .last > ul li > a { font-size: 13px; padding: 20px 12px 20px 12px; } .last > ul li { min-width: 250px; height: 30px; width: 30%; } .last li > ul li a { font-size: 11px; } .last ul li ul { bottom: -51px; } } @media screen and (min-width: 501px) and (max-width: 700px) { .dws-menu-1 > ul li > a { font-size: 11px; padding: 16px 3px 16px 3px; } .dws-menu-1 > ul li { min-width: 190px; height: 30px; width: 30%; } .dws-menu-1 li > ul li a { font-size: 10px; } } @media screen and (max-width: 500px) { .dws-menu-1 > ul li > a { font-size: 9px; padding: 16px 3px 16px 3px; } .dws-menu-1 > ul li { min-width: 155px; height: 30px; width: 35%; } .dws-menu-1 li > ul li a { font-size: 9px; } .first > ul li > a { font-size: 9px; padding: 16px 3px 16px 3px; } .first > ul li { min-width: 155px; height: 30px; width: 35%; } .first li > ul li a { font-size: 9px; } .last > ul li > a { font-size: 9px; padding: 16px 3px 16px 3px; } .last > ul li { min-width: 155px; height: 30px; width: 35%; } .last li > ul li a { font-size: 9px; } .last ul li ul { bottom: -31px; } .container { margin-left: -12px; } }