Вывод подменю в определенном месте

283
10 июля 2017, 15:26

Как сделать так, чтобы при наведении мышью на пункт меню, всплывало подменю этого пункта в определенном месте на странице, как на рисунке.

Answer 1

Решение на jQuery:

В CSS вместо

.img-map>div>div:hover ul {
  display: block;
}

пропишите

.img-map>div>div:hover ul,
.img-map>div>div.active ul {
  display: block;
}

В JS использовал уже добавленные вами атрибуты data-class.

$('ul.fll a').on('mouseover mouseout', function() { 
  var list = $(this).closest('li.hov').attr('data-class'); 
  $('.' + list).toggleClass('active'); 
});
.img-map { 
  position: relative; 
  margin: 65px 0 0; 
} 
 
.img-map>ul { 
  color: #3daa35; 
  font-size: 30px; 
  line-height: 24px; 
  width: 265px; 
  white-space: nowrap; 
} 
 
.img-map>ul a { 
  font-size: 18px; 
  line-height: 16px; 
  color: #094b81; 
  margin-left: -5px; 
  text-decoration: none; 
  display: inline-block; 
  border-bottom: 1px dashed; 
  position: absolute; 
  top: 5px; 
} 
 
.img-map>ul span { 
  color: #000; 
  font-size: 18px; 
  display: inline-block; 
  margin-left: -12px; 
  margin-bottom: 3px; 
  line-height: 16px; 
  vertical-align: middle; 
} 
 
.bx-ie .img-map>ul span, 
.bx-ie11 .img-map>ul span { 
  margin-left: -52px; 
  margin-bottom: 10px; 
} 
 
.img-map>ul li { 
  margin-bottom: 40px; 
  position: relative; 
} 
 
.bx-ie .img-map>ul, 
.bx-ie11 .img-map>ul { 
  width: 270px; 
} 
 
.bx-ie .img-map>ul a, 
.bx-ie11 .img-map>ul a { 
  position: absolute; 
  top: 3px; 
} 
 
.bx-ie11 .img-map>ul a, 
.bx-ie10 .img-map>ul a, 
.bx-ie9 .img-map>ul a, 
.bx-ie8 .img-map>ul a { 
  margin-left: 5px; 
} 
 
.bx-ie .img-map>ul li, 
.bx-ie11 .img-map>ul li { 
  margin-bottom: 35px; 
  position: relative; 
} 
 
.img-map>ul li:last-child { 
  margin-bottom: 0; 
} 
 
.img-map>div { 
  position: absolute; 
  left: 261px; 
  top: -60px; 
} 
 
.img-map>ul li:hover { 
  color: #fed209; 
} 
 
.img-map>ul li:hover a { 
  color: #2d2d2d; 
  border-color: transparent; 
} 
 
.img-map>div>div { 
  position: absolute; 
  cursor: pointer; 
  width: 13px; 
  height: 13px; 
  border-radius: 100%; 
  border: 3px solid #fff; 
  background: #3caa37; 
  background: -moz-linear-gradient(top, #3caa37 0%, #46ac2c 100%); 
  background: -webkit-linear-gradient(top, #3caa37 0%, #46ac2c 100%); 
  background: linear-gradient(to bottom, #3caa37 0%, #46ac2c 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3caa37', endColorstr='#46ac2c', GradientType=0); 
} 
 
.img-map>div>div:hover { 
  background: #fde732; 
  background: -moz-linear-gradient(top, #fde732 0%, #ffc607 100%); 
  background: -webkit-linear-gradient(top, #fde732 0%, #ffc607 100%); 
  background: linear-gradient(to bottom, #fde732 0%, #ffc607 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fde732', endColorstr='#ffc607', GradientType=0); 
} 
 
.img-map>div>div ul { 
  display: none; 
  position: absolute; 
  z-index: 10; 
  left: 17px; 
  top: -50px; 
  width: 240px; 
  padding: 17px 17px 17px 25px; 
  font-size: 15px; 
  list-style: none; 
  background: #ebecec; 
} 
 
.img-map>div>div:hover ul, 
.img-map>div>div.active ul { 
  display: block; 
} 
 
.img-map>div>div.hoverclass ul { 
  display: block; 
} 
 
.img-map>div>div ul li { 
  position: relative; 
  margin-bottom: 10px; 
} 
 
 
/*.img-map>div>div ul li:before {content: "→"; position: absolute; left: -23px; top: 0;}*/ 
 
.img-map>div>div ul:before { 
  content: ""; 
  position: absolute; 
  left: -20px; 
  top: 47px; 
  border: 10px solid transparent; 
  border-right: 10px solid #ebecec; 
} 
 
.map-list1 { 
  left: 289px; 
  top: 30px; 
} 
 
.map-list2 { 
  left: 405px; 
  top: 45px; 
} 
 
.map-list3 { 
  left: 399px; 
  top: 107px; 
} 
 
.map-list4 { 
  left: 315px; 
  top: 300px; 
} 
 
.map-list5 { 
  left: 275px; 
  top: 183px; 
} 
 
.map-list6 { 
  left: 245px; 
  top: 265px; 
} 
 
.map-list7 { 
  left: 455px; 
  top: 287px; 
} 
 
.map-list8 { 
  left: 50px; 
  top: 170px; 
} 
 
.map-list9 { 
  left: 447px; 
  top: 147px; 
} 
 
.map-list10 { 
  left: 310px; 
  top: 123px; 
} 
 
.map-list2 ul, 
.map-list3 ul, 
.map-list4 ul { 
  left: auto !important; 
  right: 17px; 
} 
 
.map-list2 ul:before, 
.map-list3 ul:before, 
.map-list4 ul:before { 
  left: auto !important; 
  right: -10px; 
  border-right: 0 !important; 
  border-left: 10px solid #ebecec !important; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div style="width:1200px"> 
  <div class="img-map clearfix"> 
    <div> 
      <a href='https://hostingkartinok.com/show-image.php?id=4055428d8952d97059a982941a17d175' title='хостинг картинок'><img style="width:100%" src='https://s8.hostingkartinok.com/uploads/images/2017/07/4055428d8952d97059a982941a17d175.png' /></a> 
      <div class="map-list1"> 
        <ul> 
          <li><a href="/catalog/dymokhodnye_sistemy/">Дымоходные системы</a></li> 
        </ul> 
      </div> 
      <div class="map-list2"> 
        <ul> 
          <li><a href="/catalog/metallocherepitsa/">Металлочерепица</a></li> 
          <li><a href="/catalog/gibkaya_cherepitsa/">Гибкая черепица</a></li> 
          <li><a href="/catalog/faltsevaya_krovlya/">Материалы для фальцевой кровли</a></li> 
          <li><a href="/catalog/tsementno_peschanaya_cherepitsa/">Цементно-песчаная черепица</a></li> 
          <li><a href="/catalog/keramicheskaya_cherepitsa/">Керамическая черепица</a></li> 
          <li><a href="/catalog/kompozitnaya_cherepitsa/">Композитная черепица</a></li> 
          <li><a href="/catalog/prirodnyy_shifer_rathscheck/">Кровельный сланец</a></li> 
          <li><a href="/catalog/profnastil/">Профнастил</a></li> 
          <li><a href="/catalog/ondulin/">Ондулин</a></li> 
        </ul> 
      </div> 
      <div class="map-list3"> 
        <ul> 
          <li><a href="/catalog/vodostoki/">Водосточные системы</a></li> 
          <li><a href="/catalog/elementy_bezopasnosti/">Элементы безопасности</a></li> 
          <li><a href="/catalog/elementy_ventilyatsii/">Элементы вентиляции</a></li> 
          <li><a href="/catalog/okna_mansardnye/">Мансардные окна</a></li> 
          <li><a href="/catalog/cherdachnye_lestnitsy/">Чердачные лестницы</a></li> 
          <li><a href="/catalog/krovelnye_komplektuyushchie/">Кровельные комплектующие</a></li> 
        </ul> 
      </div> 
      <div class="map-list4"> 
        <ul> 
          <li><a href="/catalog/rastvory_dlya_fasadnykh_rabot/">Растворы для фасадных работ</a></li> 
          <li><a href="/catalog/rastvory_dlya_moshcheniya/">Расворы для укладки брусчатки</a></li> 
          <li><a href="/catalog/dlya_napolnoy_plitki/">Расворы для укладки напольной плитки</a></li> 
          <li><a href="/catalog/remontnye_shtukaturki_i_shpaklevki/">Ремонтные шпаклевки</a></li> 
          <li><a href="/catalog/rastvory_i_klei_dlya_kladki_/">Клей для стеновых блоков</a></li> 
          <li><a href="/catalog/gidroizolyatsiya_1/">Гидроизоляция</a></li> 
          <li><a href="/catalog/klei_dlya_plitki_1/">Клеи для плитки</a></li> 
          <li><a href="/catalog/zatirki_1/">Затирки</a></li> 
          <li><a href="/catalog/nalivnye_poly/">Наливные полы</a></li> 
        </ul> 
      </div> 
      <div class="map-list5"> 
        <ul> 
          <li><a href="/catalog/gazobetonnye_bloki/">Газобетонные блоки</a></li> 
          <li><a href="/catalog/porizovannye_bloki/">Поризованные блоки</a></li> 
          <li><a href="/catalog/peregorodochnye_bloki/">Перегородочные блоки</a></li> 
          <li><a href="/catalog/odinarnyy_kirpich/">Одинарный кирпич</a></li> 
          <li><a href="/catalog/dvoynoy_kirpich/">Кирпич 2,1 НФ и 4,5 НФ</a></li> 
          <li><a href="/catalog/polnotelyy_kirpich/">Полнотелый кирпич</a></li> 
          <li><a href="/catalog/peremychki_dlya_okonnykh_i_dvernykh_proemov/">Перемычки для оконных и дверных проемов</a></li> 
          <li><a href="/catalog/dugoobraznye_bloki/">Дугообразные блоки</a></li> 
          <li><a href="/catalog/sborno_monolitnye_perekrytiya/">Сборно-монолитные перекрытия</a></li> 
          <li><a href="/catalog/instrument/">Крепеж и инструмент</a></li> 
        </ul> 
      </div> 
      <div class="map-list6"> 
        <ul> 
          <li><a href="/catalog/oblitsovochnyy_kirpich/">Облицовочный кирпич</a></li> 
          <li><a href="/catalog/shtukaturnyy_fasad/">Штукатурный фасад</a></li> 
          <li><a href="/catalog/sayding/">Сайдинг</a></li> 
          <li><a href="/catalog/oblitsovochnaya_plitka/">Облицовочная плитка</a></li> 
          <li><a href="/catalog/iskusstvennyy_kamen/">Искусственный камень</a></li> 
          <li><a href="/catalog/fasadnye_paneli/">Фасадные панели</a></li> 
          <li><a href="/catalog/kraski/">Краски</a></li> 
        </ul> 
      </div> 
      <div class="map-list7"> 
        <ul> 
          <li><a href="/catalog/bruschatka_klinkernaya/">Брусчатка клинкерная</a></li> 
          <li><a href="/catalog/bruschatka_betonnaya/">Брусчатка бетонная</a></li> 
          <li><a href="/catalog/bruschatka_ruchnoy_formovki/">Брусчатка ручной формовки</a></li> 
          <li><a href="/catalog/bruschatka_mozaichnaya/">Брусчатка мозаичная</a></li> 
          <li><a href="/catalog/ekspluatiruemyy_gazon/">Эксплуатируемый газон</a></li> 
          <li><a href="/catalog/geosintetiki/">Геосинтетики</a></li> 
          <li><a href="/catalog/plitka_napolnaya_i_stupeni/">Плитка напольная и ступени</a></li> 
          <li><a href="/catalog/terrasnye_plity/">Террасные плиты</a></li> 
          <li><a href="/catalog/bordyury_i_vodootvody/">Бордюры и водоотводы</a></li> 
        </ul> 
      </div> 
      <div class="map-list8"> 
        <ul> 
          <li><a href="/catalog/zabory_iz_profnastila/">Заборы из профнастила</a></li> 
          <li><a href="/catalog/modulnye_zabory/">Модульные заборы</a></li> 
          <li><a href="/catalog/zabory_iz_svarnykh_paneley/">Заборы из сварных панелей</a></li> 
        </ul> 
      </div> 
      <!-- <div class="map-list9"> 
			<ul> 
							</ul> 
		</div> --> 
      <div class="map-list10"> 
        <ul> 
          <li><a href="/catalog/utepliteli/">Утеплители</a></li> 
          <li><a href="/catalog/izolyatsionnye_materialy/">Изоляционные материалы</a></li> 
        </ul> 
      </div> 
 
      <!-- <div class="map-list15"> 
			<ul> 
				<li><a href="/catalog/utepliteli/">Утеплители</a></li> 
			</ul> 
		</div> 
<div class="map-list16"> 
			<ul> 
				<li><a href="/catalog/izolyatsionnye_materialy/">Изоляционные материалы</a></li> 
			</ul> 
</div> --> 
 
    </div> 
    <ul class="fll"> 
      <!--			<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 class="hov" data-class="map-list2"> 
        <a href="/catalog/#Кровельные_материалы">Кровельные материалы</a> 
      </li> 
      <li class="hov" data-class="map-list3"> 
        <a href="/catalog/#Обустройство_кровли">Обустройство кровли</a> 
      </li> 
      <li class="hov" data-class="map-list5"> 
        <a href="/catalog/#Стеновые_материалы">Стеновые материалы</a> 
      </li> 
      <li class="hov" data-class="map-list6"> 
        <a href="/catalog/#Фасадные_материалы">Фасадные материалы</a> 
      </li> 
 
 
      <li class="hov" data-class="map-list7"> 
        <a href="/catalog/#Тротуары">Тротуары</a> 
      </li> 
 
    </ul> 
    <ul class="flr"> 
      <!--			<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 class="hov" data-class="map-list15"> 
        <a href="/catalog/#Утепление_и_изоляция">Утепление и изоляция</a> 
      </li> 
      <li class="hov" data-class="map-list4"> 
        <a href="/catalog/#Cтроительные_смеси">Строительные смеси</a> 
      </li> 
      <li class="hov" data-class="map-list8"> 
        <a href="/catalog/#Заборы">Заборы</a> 
      </li> 
      <li class="hov" data-class="map-list1"> 
        <a href="/catalog/#Дымоходные_системы">Дымоходы</a> 
      </li> 
      <!-- <li class="hov" data-class="map-list9"> 
				<a href="/catalog/elementy_bezopasnosti/">Элементы безопасности</a> 
			</li> --> 
 
 
    </ul> 
  </div>

UPDATE с учетом комментария про добавление задержки исчезновения:

var delay; 
$('ul.fll a').on('mouseover', function() { 
  clearTimeout(delay); 
  $('.map-list').removeClass('active'); 
  $('.' + $(this).closest('li.hov').attr('data-class')).addClass('active'); 
}).on('mouseout', function() { 
  var link = $(this); 
  delay = setTimeout(function() { 
    $('.' + link.closest('li.hov').attr('data-class')).removeClass('active'); 
  }, 3000); // время задежки в миллисекундах 
});
.img-map { 
  position: relative; 
  margin: 65px 0 0; 
} 
 
.img-map>ul { 
  color: #3daa35; 
  font-size: 30px; 
  line-height: 24px; 
  width: 265px; 
  white-space: nowrap; 
} 
 
.img-map>ul a { 
  font-size: 18px; 
  line-height: 16px; 
  color: #094b81; 
  margin-left: -5px; 
  text-decoration: none; 
  display: inline-block; 
  border-bottom: 1px dashed; 
  position: absolute; 
  top: 5px; 
} 
 
.img-map>ul span { 
  color: #000; 
  font-size: 18px; 
  display: inline-block; 
  margin-left: -12px; 
  margin-bottom: 3px; 
  line-height: 16px; 
  vertical-align: middle; 
} 
 
.bx-ie .img-map>ul span, 
.bx-ie11 .img-map>ul span { 
  margin-left: -52px; 
  margin-bottom: 10px; 
} 
 
.img-map>ul li { 
  margin-bottom: 40px; 
  position: relative; 
} 
 
.bx-ie .img-map>ul, 
.bx-ie11 .img-map>ul { 
  width: 270px; 
} 
 
.bx-ie .img-map>ul a, 
.bx-ie11 .img-map>ul a { 
  position: absolute; 
  top: 3px; 
} 
 
.bx-ie11 .img-map>ul a, 
.bx-ie10 .img-map>ul a, 
.bx-ie9 .img-map>ul a, 
.bx-ie8 .img-map>ul a { 
  margin-left: 5px; 
} 
 
.bx-ie .img-map>ul li, 
.bx-ie11 .img-map>ul li { 
  margin-bottom: 35px; 
  position: relative; 
} 
 
.img-map>ul li:last-child { 
  margin-bottom: 0; 
} 
 
.img-map>div { 
  position: absolute; 
  left: 261px; 
  top: -60px; 
} 
 
.img-map>ul li:hover { 
  color: #fed209; 
} 
 
.img-map>ul li:hover a { 
  color: #2d2d2d; 
  border-color: transparent; 
} 
 
.img-map>div>div { 
  position: absolute; 
  cursor: pointer; 
  width: 13px; 
  height: 13px; 
  border-radius: 100%; 
  border: 3px solid #fff; 
  background: #3caa37; 
  background: -moz-linear-gradient(top, #3caa37 0%, #46ac2c 100%); 
  background: -webkit-linear-gradient(top, #3caa37 0%, #46ac2c 100%); 
  background: linear-gradient(to bottom, #3caa37 0%, #46ac2c 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3caa37', endColorstr='#46ac2c', GradientType=0); 
} 
 
.img-map>div>div:hover { 
  background: #fde732; 
  background: -moz-linear-gradient(top, #fde732 0%, #ffc607 100%); 
  background: -webkit-linear-gradient(top, #fde732 0%, #ffc607 100%); 
  background: linear-gradient(to bottom, #fde732 0%, #ffc607 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fde732', endColorstr='#ffc607', GradientType=0); 
} 
 
.img-map>div>div ul { 
  display: none; 
  position: absolute; 
  z-index: 10; 
  left: 17px; 
  top: -50px; 
  width: 240px; 
  padding: 17px 17px 17px 25px; 
  font-size: 15px; 
  list-style: none; 
  background: #ebecec; 
} 
 
.img-map>div>div:hover ul, 
.img-map>div>div.active ul { 
  display: block; 
} 
 
.img-map>div>div.hoverclass ul { 
  display: block; 
} 
 
.img-map>div>div ul li { 
  position: relative; 
  margin-bottom: 10px; 
} 
 
 
/*.img-map>div>div ul li:before {content: "→"; position: absolute; left: -23px; top: 0;}*/ 
 
.img-map>div>div ul:before { 
  content: ""; 
  position: absolute; 
  left: -20px; 
  top: 47px; 
  border: 10px solid transparent; 
  border-right: 10px solid #ebecec; 
} 
 
.map-list1 { 
  left: 289px; 
  top: 30px; 
} 
 
.map-list2 { 
  left: 405px; 
  top: 45px; 
} 
 
.map-list3 { 
  left: 399px; 
  top: 107px; 
} 
 
.map-list4 { 
  left: 315px; 
  top: 300px; 
} 
 
.map-list5 { 
  left: 275px; 
  top: 183px; 
} 
 
.map-list6 { 
  left: 245px; 
  top: 265px; 
} 
 
.map-list7 { 
  left: 455px; 
  top: 287px; 
} 
 
.map-list8 { 
  left: 50px; 
  top: 170px; 
} 
 
.map-list9 { 
  left: 447px; 
  top: 147px; 
} 
 
.map-list10 { 
  left: 310px; 
  top: 123px; 
} 
 
.map-list2 ul, 
.map-list3 ul, 
.map-list4 ul { 
  left: auto !important; 
  right: 17px; 
} 
 
.map-list2 ul:before, 
.map-list3 ul:before, 
.map-list4 ul:before { 
  left: auto !important; 
  right: -10px; 
  border-right: 0 !important; 
  border-left: 10px solid #ebecec !important; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div style="width:1200px"> 
  <div class="img-map clearfix"> 
    <div> 
      <a href='https://hostingkartinok.com/show-image.php?id=4055428d8952d97059a982941a17d175' title='хостинг картинок'><img style="width:100%" src='https://s8.hostingkartinok.com/uploads/images/2017/07/4055428d8952d97059a982941a17d175.png' /></a> 
      <div class="map-list map-list1"> 
        <ul> 
          <li><a href="/catalog/dymokhodnye_sistemy/">Дымоходные системы</a></li> 
        </ul> 
      </div> 
      <div class="map-list map-list2"> 
        <ul> 
          <li><a href="/catalog/metallocherepitsa/">Металлочерепица</a></li> 
          <li><a href="/catalog/gibkaya_cherepitsa/">Гибкая черепица</a></li> 
          <li><a href="/catalog/faltsevaya_krovlya/">Материалы для фальцевой кровли</a></li> 
          <li><a href="/catalog/tsementno_peschanaya_cherepitsa/">Цементно-песчаная черепица</a></li> 
          <li><a href="/catalog/keramicheskaya_cherepitsa/">Керамическая черепица</a></li> 
          <li><a href="/catalog/kompozitnaya_cherepitsa/">Композитная черепица</a></li> 
          <li><a href="/catalog/prirodnyy_shifer_rathscheck/">Кровельный сланец</a></li> 
          <li><a href="/catalog/profnastil/">Профнастил</a></li> 
          <li><a href="/catalog/ondulin/">Ондулин</a></li> 
        </ul> 
      </div> 
      <div class="map-list map-list3"> 
        <ul> 
          <li><a href="/catalog/vodostoki/">Водосточные системы</a></li> 
          <li><a href="/catalog/elementy_bezopasnosti/">Элементы безопасности</a></li> 
          <li><a href="/catalog/elementy_ventilyatsii/">Элементы вентиляции</a></li> 
          <li><a href="/catalog/okna_mansardnye/">Мансардные окна</a></li> 
          <li><a href="/catalog/cherdachnye_lestnitsy/">Чердачные лестницы</a></li> 
          <li><a href="/catalog/krovelnye_komplektuyushchie/">Кровельные комплектующие</a></li> 
        </ul> 
      </div> 
      <div class="map-list map-list4"> 
        <ul> 
          <li><a href="/catalog/rastvory_dlya_fasadnykh_rabot/">Растворы для фасадных работ</a></li> 
          <li><a href="/catalog/rastvory_dlya_moshcheniya/">Расворы для укладки брусчатки</a></li> 
          <li><a href="/catalog/dlya_napolnoy_plitki/">Расворы для укладки напольной плитки</a></li> 
          <li><a href="/catalog/remontnye_shtukaturki_i_shpaklevki/">Ремонтные шпаклевки</a></li> 
          <li><a href="/catalog/rastvory_i_klei_dlya_kladki_/">Клей для стеновых блоков</a></li> 
          <li><a href="/catalog/gidroizolyatsiya_1/">Гидроизоляция</a></li> 
          <li><a href="/catalog/klei_dlya_plitki_1/">Клеи для плитки</a></li> 
          <li><a href="/catalog/zatirki_1/">Затирки</a></li> 
          <li><a href="/catalog/nalivnye_poly/">Наливные полы</a></li> 
        </ul> 
      </div> 
      <div class="map-list map-list5"> 
        <ul> 
          <li><a href="/catalog/gazobetonnye_bloki/">Газобетонные блоки</a></li> 
          <li><a href="/catalog/porizovannye_bloki/">Поризованные блоки</a></li> 
          <li><a href="/catalog/peregorodochnye_bloki/">Перегородочные блоки</a></li> 
          <li><a href="/catalog/odinarnyy_kirpich/">Одинарный кирпич</a></li> 
          <li><a href="/catalog/dvoynoy_kirpich/">Кирпич 2,1 НФ и 4,5 НФ</a></li> 
          <li><a href="/catalog/polnotelyy_kirpich/">Полнотелый кирпич</a></li> 
          <li><a href="/catalog/peremychki_dlya_okonnykh_i_dvernykh_proemov/">Перемычки для оконных и дверных проемов</a></li> 
          <li><a href="/catalog/dugoobraznye_bloki/">Дугообразные блоки</a></li> 
          <li><a href="/catalog/sborno_monolitnye_perekrytiya/">Сборно-монолитные перекрытия</a></li> 
          <li><a href="/catalog/instrument/">Крепеж и инструмент</a></li> 
        </ul> 
      </div> 
      <div class="map-list map-list6"> 
        <ul> 
          <li><a href="/catalog/oblitsovochnyy_kirpich/">Облицовочный кирпич</a></li> 
          <li><a href="/catalog/shtukaturnyy_fasad/">Штукатурный фасад</a></li> 
          <li><a href="/catalog/sayding/">Сайдинг</a></li> 
          <li><a href="/catalog/oblitsovochnaya_plitka/">Облицовочная плитка</a></li> 
          <li><a href="/catalog/iskusstvennyy_kamen/">Искусственный камень</a></li> 
          <li><a href="/catalog/fasadnye_paneli/">Фасадные панели</a></li> 
          <li><a href="/catalog/kraski/">Краски</a></li> 
        </ul> 
      </div> 
      <div class="map-list map-list7"> 
        <ul> 
          <li><a href="/catalog/bruschatka_klinkernaya/">Брусчатка клинкерная</a></li> 
          <li><a href="/catalog/bruschatka_betonnaya/">Брусчатка бетонная</a></li> 
          <li><a href="/catalog/bruschatka_ruchnoy_formovki/">Брусчатка ручной формовки</a></li> 
          <li><a href="/catalog/bruschatka_mozaichnaya/">Брусчатка мозаичная</a></li> 
          <li><a href="/catalog/ekspluatiruemyy_gazon/">Эксплуатируемый газон</a></li> 
          <li><a href="/catalog/geosintetiki/">Геосинтетики</a></li> 
          <li><a href="/catalog/plitka_napolnaya_i_stupeni/">Плитка напольная и ступени</a></li> 
          <li><a href="/catalog/terrasnye_plity/">Террасные плиты</a></li> 
          <li><a href="/catalog/bordyury_i_vodootvody/">Бордюры и водоотводы</a></li> 
        </ul> 
      </div> 
      <div class="map-list map-list8"> 
        <ul> 
          <li><a href="/catalog/zabory_iz_profnastila/">Заборы из профнастила</a></li> 
          <li><a href="/catalog/modulnye_zabory/">Модульные заборы</a></li> 
          <li><a href="/catalog/zabory_iz_svarnykh_paneley/">Заборы из сварных панелей</a></li> 
        </ul> 
      </div> 
      <!-- <div class="map-list9"> 
			<ul> 
							</ul> 
		</div> --> 
      <div class="map-list map-list10"> 
        <ul> 
          <li><a href="/catalog/utepliteli/">Утеплители</a></li> 
          <li><a href="/catalog/izolyatsionnye_materialy/">Изоляционные материалы</a></li> 
        </ul> 
      </div> 
 
      <!-- <div class="map-list15"> 
			<ul> 
				<li><a href="/catalog/utepliteli/">Утеплители</a></li> 
			</ul> 
		</div> 
<div class="map-list16"> 
			<ul> 
				<li><a href="/catalog/izolyatsionnye_materialy/">Изоляционные материалы</a></li> 
			</ul> 
</div> --> 
 
    </div> 
    <ul class="fll"> 
      <!--			<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 class="hov" data-class="map-list2"> 
        <a href="/catalog/#Кровельные_материалы">Кровельные материалы</a> 
      </li> 
      <li class="hov" data-class="map-list3"> 
        <a href="/catalog/#Обустройство_кровли">Обустройство кровли</a> 
      </li> 
      <li class="hov" data-class="map-list5"> 
        <a href="/catalog/#Стеновые_материалы">Стеновые материалы</a> 
      </li> 
      <li class="hov" data-class="map-list6"> 
        <a href="/catalog/#Фасадные_материалы">Фасадные материалы</a> 
      </li> 
 
 
      <li class="hov" data-class="map-list7"> 
        <a href="/catalog/#Тротуары">Тротуары</a> 
      </li> 
 
    </ul> 
    <ul class="flr"> 
      <!--			<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 class="hov" data-class="map-list15"> 
        <a href="/catalog/#Утепление_и_изоляция">Утепление и изоляция</a> 
      </li> 
      <li class="hov" data-class="map-list4"> 
        <a href="/catalog/#Cтроительные_смеси">Строительные смеси</a> 
      </li> 
      <li class="hov" data-class="map-list8"> 
        <a href="/catalog/#Заборы">Заборы</a> 
      </li> 
      <li class="hov" data-class="map-list1"> 
        <a href="/catalog/#Дымоходные_системы">Дымоходы</a> 
      </li> 
      <!-- <li class="hov" data-class="map-list9"> 
				<a href="/catalog/elementy_bezopasnosti/">Элементы безопасности</a> 
			</li> --> 
 
 
    </ul> 
  </div>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте beauty-health.com.ua
ТОП-10
READ ALSO
Не работает кнопка отправки формы
HTML

Не работает кнопка отправки формы

Есть такой html код:

 381
Вызов функции JavaScript для значения поля /p html
HTML

Вызов функции JavaScript для значения поля /p html

Добрый деньПодскажите, пожалуйста, есть надпись на html:

 228
PHP Parse error: syntax error, unexpected end of file in index.php line 100
HTML

PHP Parse error: syntax error, unexpected end of file in index.php line 100

Мой код:

 333
Высота адресной строки браузера
HTML

Высота адресной строки браузера

Можно ли каким-нибудь способом узнать высоту адресной строки браузера на телефоне (jquery)?

 337