Наложение текста поверх другого текста

278

21 марта 2017, 11:06

Здравствуйте.

При наведении мыши на блок меню "УМОВИ", появляется выпадающий список, и этот список почему-то является менее приоритетным, чем остальные элементы на странице, которые находятся ниже, и получается так, что эти элементы налаживаются поверх этого списка.

Как сделать так, чтобы выпадающий список налаживался поверх элементов?

var page_name = "home"; 
 
function in_array(needle, array) { 
  for (var i = 0; i < array.length; i++) { 
    if (array[i] == needle) 
      return true; 
  } 
 
  return false; 
} 
 
function setActiveMenuItem() { 
  var 
    menu_items = document.getElementsByClassName("menu_item"); 
 
  for (var i = 0; i < menu_items.length; i++) { 
    var 
      menu_item = menu_items[i]; 
 
    if (menu_item.getAttribute("data-menu") == page_name) { 
      menu_item.classList.add("active"); 
    } 
  } 
} 
 
window.addEventListener("load", function() { 
  switch (page_name) { 
    case "home": 
      var 
        menu_items = document.getElementsByClassName("menu_item"); 
 
      for (var i = 0; i < menu_items.length; i++) { 
        var 
          menu_item = menu_items[i], 
          menu_dropdown = menu_item.getElementsByClassName("dropdown_menu"); 
 
        if (menu_dropdown.length) { 
          menu_item.addEventListener("mouseover", function() { 
            this.getElementsByClassName("dropdown_menu")[0].classList.remove("hidden"); 
          }, false); 
          menu_item.addEventListener("mouseout", function() { 
            this.getElementsByClassName("dropdown_menu")[0].classList.add("hidden"); 
          }, false); 
        } 
      } 
 
      break; 
 
    default: 
      break; 
  } 
 
  setActiveMenuItem(); 
}, false);

  @font-face { 
  font-family: "Gothic"; 
  src: url("../fonts/Gothic.ttf"); 
} 
 
* { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  background-color: #edeef0; 
  color: #fff; 
  font-family: "Gothic", sans-serif; 
} 
 
.clearfix { 
  display: block; 
} 
 
.clearfix:before, 
.clearfix:after { 
  display: table; 
  line-height: 0; 
  content: ''; 
} 
 
.clearfix:after { 
  clear: both; 
} 
 
.hidden { 
  display: none; 
} 
 
.noselect { 
  -webkit-user-select: none; 
  -moz-user-select: none; 
  user-select: none; 
} 
 
.trns150ms { 
  -webkit-transition: all 0.15s ease-in-out; 
  -moz-transition: all 0.15s ease-in-out; 
  transition: all 0.15s ease-in-out; 
} 
 
#body { 
  width: 1280px; 
  margin: 20px auto; 
  background-image: url("../images/bg.png"); 
  background-size: cover; 
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px; 
  border-radius: 5px; 
} 
 
#body .header { 
  width: 100%; 
  height: 235px; 
  background-image: url("../images/header.png"); 
  -webkit-border-top-left-radius: 5px; 
  -moz-border-top-left-radius: 5px; 
  border-top-left-radius: 5px; 
  -webkit-border-top-right-radius: 5px; 
  -moz-border-top-right-radius: 5px; 
  border-top-right-radius: 5px; 
} 
 
#body .content { 
  width: 70%; 
  margin: 0px auto; 
  background-color: #b8b9ba; 
} 
 
#body .content #menu { 
  width: 100%; 
  height: 72px; 
  background-color: #878a8c; 
  -webkit-border-bottom-left-radius: 50px; 
  -moz-border-bottom-left-radius: 50px; 
  border-bottom-left-radius: 50px; 
  -webkit-border-bottom-right-radius: 50px; 
  -moz-border-bottom-right-radius: 50px; 
  border-bottom-right-radius: 50px; 
} 
 
#body .content #menu .menu_body { 
  width: 90%; 
  height: 100%; 
  margin: 0px auto; 
} 
 
#body .content #menu .menu_body .menu_item { 
  cursor: pointer; 
  float: left; 
  width: 148px; 
  height: 100%; 
  padding: 0px 5px; 
  line-height: 72px; 
  text-align: center; 
  font-size: 28px; 
} 
 
#body .content #menu .menu_body .menu_item.active, 
#body .content #menu .menu_body .menu_item:hover { 
  background-color: #d8d7dc; 
} 
 
#body .content #menu .menu_body .line { 
  float: left; 
  width: 3px; 
  height: 52px; 
  margin: 10px 0px; 
  background-color: #fff; 
} 
 
#body .content #menu .menu_body .menu_item .dropdown_menu { 
  width: 105%; 
  margin-left: -2.5%; 
  background-color: #878a8c; 
  -webkit-border-bottom-left-radius: 25px; 
  -moz-border-bottom-left-radius: 25px; 
  border-bottom-left-radius: 25px; 
  -webkit-border-bottom-right-radius: 25px; 
  -moz-border-bottom-right-radius: 25px; 
  border-bottom-right-radius: 25px; 
} 
 
#body .content #menu .menu_body .menu_item .dropdown_menu .dropdown_menu_item { 
  font-size: 21px; 
  line-height: 21px; 
  padding: 10px 0px; 
} 
 
#body .content #menu .menu_body .menu_item .dropdown_menu .dropdown_menu_item:hover { 
  background-color: #d8d7dc; 
} 
 
#body .content #menu .menu_body .menu_item .dropdown_menu .dropdown_line { 
  float: left; 
  width: 90px; 
  height: 3px; 
  margin: 0px 27.5px; 
  background-color: #fff; 
} 
 
#body .content .page { 
  padding: 30px 0px; 
} 
 
#body .content .page .symbolics { 
  width: 90%; 
  margin: 0px auto; 
} 
 
#body .content .page .symbolics .symbolics_title { 
  text-align: center; 
  font-size: 30px; 
  font-weight: bold; 
  font-style: italic; 
} 
 
#body .content .page .symbolics .symbolics_block { 
  float: left; 
  width: 45%; 
  background-color: #878a8c; 
  -webkit-border-radius: 35px; 
  -moz-border-radius: 35px; 
  border-radius: 35px; 
  padding: 10px; 
} 
 
#body .content .page .symbolics .symbolics_block.finl { 
  margin-right: 5%; 
} 
 
#body .content .page .symbolics .symbolics_block .symbolics_block_title { 
  color: red; 
  font-size: 25px; 
  font-weight: bold; 
} 
 
#body .content .page .symbolics .symbolics_block .symbolics_block_title, 
#body .content .page .symbolics .symbolics_block .symbolics_block_text { 
  text-align: center; 
  ;

<body class="noselect"> 
  <div id="body"> 
    <div class="header"></div> 
    <div class="content"> 
      <div id="menu"> 
        <div class="menu_body"> 
          <div class="menu_item trns150ms" data-menu="home">ГОЛОВНА</div> 
          <div class="line"></div> 
          <div class="menu_item trns150ms" data-menu="about">ПРО НАС</div> 
          <div class="line"></div> 
          <div class="menu_item trns150ms" data-menu="terms"> 
            УМОВИ ↓ 
            <div class="dropdown_menu hidden"> 
              <div class="dropdown_menu_item trns150ms">РЕЖИМ <br />ДНЯ</div> 
              <div class="dropdown_line"></div> 
              <div class="dropdown_menu_item trns150ms">РОЗКЛАД <br />ЗАНЯТЬ</div> 
              <div class="dropdown_line"></div> 
              <div class="dropdown_menu_item trns150ms">ХАРЧУВАННЯ</div> 
              <div class="dropdown_line"></div> 
              <div class="dropdown_menu_item trns150ms">ОХОРОНА <br />ЗДОРОВ'Я</div> 
            </div> 
          </div> 
          <div class="line"></div> 
          <div class="menu_item trns150ms" data-menu="photos"> 
            ФОТО ↓ 
            <div class="dropdown_menu hidden"> 
              <div class="dropdown_menu_item trns150ms">АТМОСФЕРА</div> 
              <div class="dropdown_line"></div> 
              <div class="dropdown_menu_item trns150ms">СВЯТА</div> 
            </div> 
          </div> 
          <div class="line"></div> 
          <div class="menu_item trns150ms" data-menu="contacts">КОНТАКТИ</div> 
        </div> 
      </div> 
 
      <div class="page clearfix"> 
        <div class="symbolics"> 
          <div class="symbolics_title">СИМВОЛIКА НАШОГО САДОЧКА</div> 
 
          <br /> <br /> 
 
          <div class="symbolics_hymn symbolics_block finl"> 
            <div class="symbolics_block_title">ГIМН</div> 
            <br /> 
            <div class="symbolics_block_text"> 
              І<br /> Наш дитячий садочок чудовий, <br /> Дуже сонячний, теплий, як дім, <br /> Відкриває нам світ кольоровий.<br /> Тож мерщій у «Веселку» ходім! <br /> Приспів: 
              <br /> «Веселка», «Веселка» - це радість і сміх, <br /> Турбота й тепло огортають усіх. «Веселка»,<br /> «Веселка» - це другий наш дім, <br /> Бо затишно й весело дітям у нім.<br /> ІІ <br /> Враз зустрінуть малят добрі люди,<br /> Суто 
              весь із жінок колектив.<br /> Веселково і гарно всім буде,<br /> Повно безліч казкових тут див.<br /> Приспів: 
              <br /> «Веселка», «Веселка» - це радість і сміх,<br /> Турбота й тепло огортають усіх. <br /> «Веселка», «Веселка» - це другий наш дім,<br /> Бо затишно й весело дітям у нім.<br /> 
            </div> 
          </div> 
 
          <div class="symbolics_hymn symbolics_block"> 
            <div class="symbolics_block_title">ГIМН</div> 
            <br /> 
            <div class="symbolics_block_text"> 
              І<br /> Наш дитячий садочок чудовий, <br /> Дуже сонячний, теплий, як дім, <br /> Відкриває нам світ кольоровий.<br /> Тож мерщій у «Веселку» ходім! <br /> Приспів: 
              <br /> «Веселка», «Веселка» - це радість і сміх, <br /> Турбота й тепло огортають усіх. «Веселка»,<br /> «Веселка» - це другий наш дім, <br /> Бо затишно й весело дітям у нім.<br /> ІІ <br /> Враз зустрінуть малят добрі люди,<br /> Суто 
              весь із жінок колектив.<br /> Веселково і гарно всім буде,<br /> Повно безліч казкових тут див.<br /> Приспів: 
              <br /> «Веселка», «Веселка» - це радість і сміх,<br /> Турбота й тепло огортають усіх. <br /> «Веселка», «Веселка» - це другий наш дім,<br /> Бо затишно й весело дітям у нім.<br /> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</body>

Answer 1

DIV с классом .menu_body имеет статичную высоту в 100 пикселей, в эту часть помещается только название меню, все остальное вылезает за пределы данного DIV'а, поэтому не странно, что у него такое поведение.

Добавьте position: relative к классу #body .content #menu .menu_body .menu_item .dropdown_menu и ваша проблема решится.