Доработка меню (Резиновое меню)

175
23 января 2020, 00:50

Есть проект. Переделываю меню, контейнеров нет, ширину задаю в % (под популярные разрешения дисплеев через медиазапросы).

Но вот вопрос, при изменении разрешения дисплея, меню вылазит сразу же, то есть не уменьшается в процентном соотношении. Подскажите как это исправить?

Часть кода меню:

 .dropdown-submenu { 
 position: relative; 
 } 
 .dropdown-menu>li>a { 
    padding-top: 7px; 
    padding-bottom: 7px; 
    /*white-space: normal;*/ 
} 
 .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; 
 } 
  
 .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: #cccccc; 
 margin-top: 5px; 
 margin-right: -10px; 
 } 
  
 .dropdown-submenu:hover>a:after { 
 border-left-color: #ffffff; 
 } 
  
 .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; 
 } 
 @media (max-width: 1980px) { 
 ul.dropdown-menu.number_one { 
 	width: 153%; 
} 
 ul.dropdown-menu.number_one_2 { 
 	width: 107%; 
} 
} 
 @media (max-width: 1680px) { 
 ul.dropdown-menu.number_one { 
 	width: 139%; 
} 
 ul.dropdown-menu.number_one_2 { 
 	width: 90%; 
} 
} 
 @media (max-width: 1600px) { 
 ul.dropdown-menu.number_one { 
 	width: 130%; 
} 
 ul.dropdown-menu.number_one_2 { 
 	width: 90%; 
} 
} 
 @media (max-width: 1440px) { 
 ul.dropdown-menu.number_one { 
 	width: 111.5%; 
} 
 ul.dropdown-menu.number_one_2 { 
 	width: 90%; 
} 
} 
 @media (max-width: 1366px) { 
 ul.dropdown-menu.number_one { 
 	width: 103%; 
} 
 ul.dropdown-menu.number_one_2 { 
 	width: 90%; 
} 
} 
 @media (max-width: 1280px) { 
 ul.dropdown-menu.number_one { 
 	width: 194.5%; 
} 
 ul.dropdown-menu.number_one_2 { 
 	width: 100%; 
} 
.dropdown-menu>li>a { 
	white-space: normal; 
} 
}
<head> 
<link rel="stylesheet" href="http://bootstraptema.ru/plugins/2015/bootstrap3/bootstrap.min.css" /> 
</head> 
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> 
 <li class="dropdown-submenu"> 
 <a tabindex="-1" href="#">Механизированные инструменты</a> 
 <ul class="dropdown-menu number_one"> 
 <li class="dropdown-submenu"> 
 <a href="#">Электроинструменты</a> 
 <ul class="dropdown-menu number_one_2"> 
 <li><a href="#">Аккумуляторные отвертки</a></li> 
 <li><a href="#">Сетевые шуруповерты</a></li> 
 <li><a href="#">УШМ (болгарки)</a></li> 
 <li><a href="#">Отбойные молотки</a></li> 
 <li><a href="#">Лобзики</a></li> 
 <li><a href="#">Пилы торцовочные</a></li> 
 <li><a href="#">Пилы цепные</a></li> 
 <li><a href="#">Электрорубанки</a></li> 
 <li><a href="#">Степлеры и ножницы</a></li> 
 <li><a href="#">Граверы</a></li> 
 <li><a href="#">Гайковерты (электро)</a></li> 
 <li><a href="#">Аккумуляторные инструменты</a></li> 
 <li><a href="#">Дрели</a></li> 
 <li><a href="#">Перфораторы</a></li> 
 <li><a href="#">Миксеры (электро)</a></li> 
 <li><a href="#">Пилы циркулярные</a></li> 
 <li><a href="#">Пилы сабельные</a></li> 
 <li><a href="#">Фены</a></li> 
 <li><a href="#">Шлифовальные машины</a></li> 
 <li><a href="#">Краскопульты электрические</a></li> 
 <li><a href="#">Штроборезы</a></li> 
 <li><a href="#">Принадлежности к электроинструменту</a></li> 
  
 </ul> 
 </li> 
 <li class="dropdown-submenu"> 
 <a href="#">Станки</a> 
 <ul class="dropdown-menu"> 
 <li><a href="#">Станки распиловочные</a></li> 
 <li><a href="#">Лобзиковые станки</a></li> 
 <li><a href="#">Токарные станки</a></li> 
 <li><a href="#">Станки рейсмусовые</a></li> 
 <li><a href="#">Электроплиткорезы</a></li> 
 <li><a href="#">Ленточные пилы</a></li> 
 <li><a href="#">Станки сверлильные</a></li> 
 <li><a href="#">Станки шлифовальные</a></li> 
 <li><a href="#">Станки фуговально-рейсмусовые</a></li> 
 <li><a href="#">Точила</a></li> 
 </ul> 
 </li> 
 <li class="dropdown-submenu"> 
 <a href="#">Силовое оборудование</a> 
 <ul class="dropdown-menu"> 
 <li><a href="#">Генераторы (электростанции)</a></li> 
 <li><a href="#">Принадлежности для генераторов</a></li> 
 <li><a href="#">Сварочное оборудование</a></li> 
 </ul> 
 </li> 
 <li class="dropdown-submenu"> 
 <a href="#">Строительное оборудование</a> 
 <ul class="dropdown-menu"> 
 <li><a href="#">Виброплиты</a></li> 
 <li><a href="#">Мотопомпы</a></li> 
 <li><a href="#">Швонарезчики</a></li> 
 <li><a href="#">Бетономешалки</a></li> 
 
 </ul> 
 </li> 
 <li class="dropdown-submenu"> 
 <a href="#">Насосное оборудование</a> 
 <ul class="dropdown-menu"> 
 <li><a href="#">Насосные станции</a></li> 
 <li><a href="#">Насосы фонтанные</a></li> 
 <li><a href="#">Насосы</a></li> 
 <li><a href="#">Принадлежности для насосов</a></li> 
 </ul> 
 </li> 
 <li class="dropdown-submenu"> 
 <a href="#">Тепло и клининговое оборудование</a> 
 <ul class="dropdown-menu"> 
 <li><a href="#">Тепловое оборудование</a></li> 
 <li><a href="#">Пылесосы</a></li> 
 <li><a href="#">Мойка</a></li> 
 </ul> 
 </li> 
 <li class="dropdown-submenu"> 
 <a href="#">Пневматика</a> 
 <ul class="dropdown-menu"> 
 <li><a href="#">Компрессоры</a></li> 
 <li><a href="#">Принадлежности для пневмоинструмента</a></li> 
 <li><a href="#">Пистолеты пневматические</a></li> 
 </ul> 
 </li> 
 </ul> 
 </li> 
 <li class="divider"></li> 
 <li class="dropdown-submenu"> 
 <a tabindex="-1" href="#">Инженерная сантехника и инстументы</a> 
 <ul class="dropdown-menu"> 
 <li class="dropdown-submenu"> 
 <a href="#">Сантехника</a> 
 <ul class="dropdown-menu"> 
 <li><a href="#">Трубы</a></li> 
 <li><a href="#">Запорная арматура</a></li> 
 <li><a href="#">Уплотнительные материалы</a></li> 
 <li><a href="#">Прочистное оборудование</a></li> 
 <li><a href="#">Фитинги</a></li> 
 <li><a href="#">Подводка</a></li> 
 <li><a href="#">Сантех оборудование</a></li> 
 <li><a href="#">Каталог сантехтоваров</a></li> 
 </ul> 
 </li> 
 <li class="dropdown-submenu"> 
 <a href="#">Сантехнические инструменты</a> 
 <ul class="dropdown-menu"> 
 <li><a href="#">Для подготовки труб</a></li> 
 <li><a href="#">Резьбонарезной инструмент</a></li> 
 </ul> 
 </li> 
 </ul> 
 </li> 
 <li class="divider"></li> 
 <li class="dropdown-submenu"> 
 <a tabindex="-1" href="#">Сад и огород</a> 
 <ul class="dropdown-menu"> 
 <li class="dropdown-submenu"> 
 <a href="#">Садовая техника</a> 
 <ul class="dropdown-menu"> 
 <li><a href="#">Бензопилы</a></li> 
 <li><a href="#">Газонокосилки бензиновые</a></li> 
 <li><a href="#">Газонокосилки электро</a></li> 
 <li><a href="#">Кусторезы (электро)</a></li> 
 <li><a href="#">Принадлежности к бензоинструменту</a></li> 
 <li><a href="#">Бензокосы и триммеры</a></li> 
 <li><a href="#">Триммеры электро</a></li> 
 <li><a href="#">Измельчители</a></li> 
 <li><a href="#">Аэраторы, скарификаторы, воздуховки</a></li> 
 <li><a href="#">Культиваторы и мотоблоки</a></li> 
 </ul> 
 </li> 
 <li class="dropdown-submenu"> 
 <a href="#">Инструменты для почвы</a> 
 <ul class="dropdown-menu"> 
 <li><a href="#">Тачки</a></li> 
 <li><a href="#">Культиваторы, мотыги, плуги</a></li> 
 <li><a href="#">Принадлежности для работы с почвой</a></li> 
 <li><a href="#">Лопаты, вилы, грабли</a></li> 
 <li><a href="#">Ручные инструменты для почвы</a></li> 
 </ul> 
 </li> 
 <li class="dropdown-submenu"> 
 <a href="#">Инструменты для полива</a> 
 <ul class="dropdown-menu"> 
 <li><a href="#">Шланги, катушки для шлангов</a></li> 
 <li><a href="#">Распылители ручные</a></li> 
 <li><a href="#">Распылители стационарные</a></li> 
 </ul> 
 </li> 
 <li class="dropdown-submenu"> 
 <a href="#">Инструменты для растений</a> 
 <ul class="dropdown-menu"> 
 <li><a href="#">Секаторы</a></li> 
 </ul> 
 </li> 
 <li class="dropdown-submenu"> 
 <a href="#">Товары для отдыха и пикника</a> 
 <ul class="dropdown-menu"> 
 <li><a href="#">Термосы</a></li> 
 <li><a href="#">Горелки туристические</a></li> 
 </ul> 
 </li> 
 </ul> 
 </li> 
</ul>

READ ALSO
Кроссбраузерное решение для autoplay mp3
HTML

Кроссбраузерное решение для autoplay mp3

Здравствуйте уважаемы форумчанеНе подскажете ли вы как прийти к данному решению? Собственно сама суть в том что бы при получении сообщения...

 164
Можно ли получить userid у сообщения
c#

Можно ли получить userid у сообщения

Пишу парсер сообщений из чата под конкретного пользователя, использую TLSharp, вопрос в том, можно ли как нибудь узнать к какому пользователю...

 164
Перезагрузка сцены
c#

Перезагрузка сцены

Как перезагрузить сцену чтобы в скриптах все переменные очистились?

 160
Какие подходы для работы со сложными формами работают?
c#

Какие подходы для работы со сложными формами работают?

Отличительная черта приложения состоит в том, что эта форма содержит очень много полей, очень много логики, очень много связей между полямиГрубо...

 156