Не срабатывает hover

286

26 ноября 2016, 18:37

Есть следующий код:

.b-menu-catalog--open { 
    min-height: 290px; 
} 
.b-menu-catalog { 
    margin: 30px 0 0; 
    text-align: center; 
} 
.b-menu-catalog__item--select, .b-menu-catalog__item--parent { 
    position: relative; 
    display: block; 
    background-position: calc(100% - 45px) 50%; 
    background-repeat: no-repeat; 
    height: 45px; 
} 
.b-menu-catalog__item, .b-menu-catalog__item--orange { 
    background: #ff8400; 
} 
.b-menu-catalog__item { 
    display: block; 
    margin: 0 165px 2px 141px; 
    padding: 15px 0 15px 45px; 
    border-radius: 15px; 
    font: 700 25px/12px "Century Gothic"; 
    color: #fbf7f3; 
    text-align: left; 
    text-decoration: none; 
    box-sizing: border-box; 
} 
.b-menu-catalog__sub { 
    position: relative; 
    border-top: 0; 
    margin-top: 7px; 
    z-index: 9999; 
    display: none; 
    width: 100%; 
} 
.b-menu-catalog__sub:hover { 
    display: block; 
} 
.b-menu-catalog--open .b-menu-catalog__item { 
    display: block; 
} 
a { 
    font: normal; 
    color: #ff8400; 
    cursor: pointer; 
    text-decoration: underline; 
} 
 
.b-menu-catalog--open .b-menu-catalog__item { 
    display: block; 
} 
.b-menu-catalog__item--sub { 
    display: block; 
    margin-left: 0; 
    margin-right: 0; 
    border: 1px solid #ff8400; 
    background: #fff; 
    color: #ff8400; 
}

<div class="b-menu-catalog b-menu-catalog--open"> 
			    <div class="b-menu-catalog__item b-menu-catalog__item--orange b-menu-catalog__item--parent"> 
                    <span>Каталог</span> 
					<div class="b-menu-catalog__sub" style="display: none;"> 
                        						<a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=169125" class="b-menu-catalog__item b-menu-catalog__item--sub">Методическая литература</a> 
                        						<a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=3510272" class="b-menu-catalog__item b-menu-catalog__item--sub">Педагогика и психология</a> 
                        						<a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=3043303" class="b-menu-catalog__item b-menu-catalog__item--sub">Готовимся к экзаменам</a> 
                        						<a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=3497701" class="b-menu-catalog__item b-menu-catalog__item--sub">Естественные науки</a> 
                        						<a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=169155" class="b-menu-catalog__item b-menu-catalog__item--sub">Гуманитарные науки</a> 
                        						<a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=5209724" class="b-menu-catalog__item b-menu-catalog__item--sub">Мировая художественная культура</a> 
                        						<a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=5209725" class="b-menu-catalog__item b-menu-catalog__item--sub">Языкознание</a> 
                        						<a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=169129" class="b-menu-catalog__item b-menu-catalog__item--sub">Художественная литература</a> 
                        						<a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=5209727" class="b-menu-catalog__item b-menu-catalog__item--sub">Великие и знаменитые</a> 
                        						<a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=3238592" class="b-menu-catalog__item b-menu-catalog__item--sub">Интеллектуальное развитие</a> 
                        						<a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=169184" class="b-menu-catalog__item b-menu-catalog__item--sub">Энциклопедии</a> 
                        						<a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=2918232" class="b-menu-catalog__item b-menu-catalog__item--sub">Периодика</a> 
                                                <div style="clear: both;"></div> 
					</div> 
                </div> 
                                <div class="b-menu-catalog__item b-menu-catalog__item--green b-menu-catalog__item--parent"> 
                    <span>Предметы</span> 
                    <div class="b-menu-catalog__sub"> 
                        <a href="http://localhost/;school/index.php?page=disciplini&amp;d=22" class="b-menu-catalog__item b-menu-catalog__item--sub">Алгебра</a> 
                        <a href="http://localhost/;school/index.php?page=disciplini&amp;d=27" class="b-menu-catalog__item b-menu-catalog__item--sub">Биология</a> 
                        <a href="http://localhost/;school/index.php?page=disciplini&amp;d=19" class="b-menu-catalog__item b-menu-catalog__item--sub">География</a> 
                        <a href="http://localhost/;school/index.php?page=disciplini&amp;d=23" class="b-menu-catalog__item b-menu-catalog__item--sub">Геометрия</a> 
                        <a href="http://localhost/;school/index.php?page=disciplini&amp;d=42" class="b-menu-catalog__item b-menu-catalog__item--sub">История</a> 
                        <a href="http://localhost/;school/index.php?page=disciplini&amp;d=14" class="b-menu-catalog__item b-menu-catalog__item--sub">Литература</a> 
                        <a href="http://localhost/;school/index.php?page=disciplini&amp;d=4" class="b-menu-catalog__item b-menu-catalog__item--sub">Русский язык</a> 
                        <a href="http://localhost/;school/index.php?page=disciplini&amp;d=28" class="b-menu-catalog__item b-menu-catalog__item--sub">Физика</a> 
                        <a href="http://localhost/;school/index.php?page=disciplini&amp;d=29" class="b-menu-catalog__item b-menu-catalog__item--sub">Химия</a> 
                    </div> 
                </div>

Скажите, пожалуйста, почему у b-menu-catalog__sub не срабатывает hover (он должен разворачиваться, занимая свое место и оттесняя пункт меню "b-menu-catalog__sub"), но этого не происходит.

Answer 1

Потому что ховер надо вешать не на сам элемент, а его родитель. Еще в первом случае инлайн стили style="display: none;" перебивают любой css. Оставил специально, чтоб видно было.

.b-menu-catalog--open { 
  min-height: 290px; 
} 
.b-menu-catalog { 
  margin: 30px 0 0; 
  text-align: center; 
} 
.b-menu-catalog__item--select, 
.b-menu-catalog__item--parent { 
  position: relative; 
  display: block; 
  background-position: calc(100% - 45px) 50%; 
  background-repeat: no-repeat; 
  height: 45px; 
} 
.b-menu-catalog__item, 
.b-menu-catalog__item--orange { 
  background: #ff8400; 
} 
.b-menu-catalog__item { 
  display: block; 
  margin: 0 165px 2px 141px; 
  padding: 15px 0 15px 45px; 
  border-radius: 15px; 
  font: 700 25px/12px"Century Gothic"; 
  color: #fbf7f3; 
  text-align: left; 
  text-decoration: none; 
  box-sizing: border-box; 
} 
.b-menu-catalog__sub { 
  position: relative; 
  border-top: 0; 
  margin-top: 7px; 
  z-index: 9999; 
  display: none; 
  width: 100%; 
} 
.b-menu-catalog__item:hover .b-menu-catalog__sub { 
  display: block; 
} 
.b-menu-catalog--open .b-menu-catalog__item { 
  display: block; 
} 
a { 
  font: normal; 
  color: #ff8400; 
  cursor: pointer; 
  text-decoration: underline; 
} 
.b-menu-catalog--open .b-menu-catalog__item { 
  display: block; 
} 
.b-menu-catalog__item--sub { 
  display: block; 
  margin-left: 0; 
  margin-right: 0; 
  border: 1px solid #ff8400; 
  background: #fff; 
  color: #ff8400; 
}

<div class="b-menu-catalog b-menu-catalog--open"> 
  <div class="b-menu-catalog__item b-menu-catalog__item--orange b-menu-catalog__item--parent"> 
    <span>Каталог</span> 
    <div class="b-menu-catalog__sub" style="display: none;"> 
      <a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=169125" class="b-menu-catalog__item b-menu-catalog__item--sub">Методическая литература</a> 
      <a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=3510272" class="b-menu-catalog__item b-menu-catalog__item--sub">Педагогика и психология</a> 
      <a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=3043303" class="b-menu-catalog__item b-menu-catalog__item--sub">Готовимся к экзаменам</a> 
      <a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=3497701" class="b-menu-catalog__item b-menu-catalog__item--sub">Естественные науки</a> 
      <a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=169155" class="b-menu-catalog__item b-menu-catalog__item--sub">Гуманитарные науки</a> 
      <a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=5209724" class="b-menu-catalog__item b-menu-catalog__item--sub">Мировая художественная культура</a> 
      <a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=5209725" class="b-menu-catalog__item b-menu-catalog__item--sub">Языкознание</a> 
      <a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=169129" class="b-menu-catalog__item b-menu-catalog__item--sub">Художественная литература</a> 
      <a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=5209727" class="b-menu-catalog__item b-menu-catalog__item--sub">Великие и знаменитые</a> 
      <a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=3238592" class="b-menu-catalog__item b-menu-catalog__item--sub">Интеллектуальное развитие</a> 
      <a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=169184" class="b-menu-catalog__item b-menu-catalog__item--sub">Энциклопедии</a> 
      <a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=2918232" class="b-menu-catalog__item b-menu-catalog__item--sub">Периодика</a> 
      <div style="clear: both;"></div> 
    </div> 
  </div> 
  <div class="b-menu-catalog__item b-menu-catalog__item--green b-menu-catalog__item--parent"> 
    <span>Предметы</span> 
    <div class="b-menu-catalog__sub"> 
      <a href="http://localhost/;school/index.php?page=disciplini&amp;d=22" class="b-menu-catalog__item b-menu-catalog__item--sub">Алгебра</a> 
      <a href="http://localhost/;school/index.php?page=disciplini&amp;d=27" class="b-menu-catalog__item b-menu-catalog__item--sub">Биология</a> 
      <a href="http://localhost/;school/index.php?page=disciplini&amp;d=19" class="b-menu-catalog__item b-menu-catalog__item--sub">География</a> 
      <a href="http://localhost/;school/index.php?page=disciplini&amp;d=23" class="b-menu-catalog__item b-menu-catalog__item--sub">Геометрия</a> 
      <a href="http://localhost/;school/index.php?page=disciplini&amp;d=42" class="b-menu-catalog__item b-menu-catalog__item--sub">История</a> 
      <a href="http://localhost/;school/index.php?page=disciplini&amp;d=14" class="b-menu-catalog__item b-menu-catalog__item--sub">Литература</a> 
      <a href="http://localhost/;school/index.php?page=disciplini&amp;d=4" class="b-menu-catalog__item b-menu-catalog__item--sub">Русский язык</a> 
      <a href="http://localhost/;school/index.php?page=disciplini&amp;d=28" class="b-menu-catalog__item b-menu-catalog__item--sub">Физика</a> 
      <a href="http://localhost/;school/index.php?page=disciplini&amp;d=29" class="b-menu-catalog__item b-menu-catalog__item--sub">Химия</a> 
    </div> 
  </div>

С выпадением, убрал высоту у .b-menu-catalog__item--select, .b-menu-catalog__item--parent

.b-menu-catalog--open { 
  min-height: 290px; 
} 
.b-menu-catalog { 
  margin: 30px 0 0; 
  text-align: center; 
} 
.b-menu-catalog__item--select, 
.b-menu-catalog__item--parent { 
  position: relative; 
  display: block; 
  background-position: calc(100% - 45px) 50%; 
  background-repeat: no-repeat; 
} 
.b-menu-catalog__item, 
.b-menu-catalog__item--orange { 
  background: #ff8400; 
} 
.b-menu-catalog__item { 
  display: block; 
  margin: 0 165px 2px 141px; 
  padding: 15px 0 15px 45px; 
  border-radius: 15px; 
  font: 700 25px/12px"Century Gothic"; 
  color: #fbf7f3; 
  text-align: left; 
  text-decoration: none; 
  box-sizing: border-box; 
} 
.b-menu-catalog__sub { 
  position: relative; 
  border-top: 0; 
  margin-top: 7px; 
  z-index: 9999; 
  display: none; 
  width: 100%; 
} 
.b-menu-catalog__item:hover .b-menu-catalog__sub { 
  display: block; 
} 
.b-menu-catalog--open .b-menu-catalog__item { 
  display: block; 
} 
a { 
  font: normal; 
  color: #ff8400; 
  cursor: pointer; 
  text-decoration: underline; 
} 
.b-menu-catalog--open .b-menu-catalog__item { 
  display: block; 
} 
.b-menu-catalog__item--sub { 
  display: block; 
  margin-left: 0; 
  margin-right: 0; 
  border: 1px solid #ff8400; 
  background: #fff; 
  color: #ff8400; 
}

<div class="b-menu-catalog b-menu-catalog--open"> 
  <div class="b-menu-catalog__item b-menu-catalog__item--orange b-menu-catalog__item--parent"> 
    <span>Каталог</span> 
    <div class="b-menu-catalog__sub"> 
      <a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=169125" class="b-menu-catalog__item b-menu-catalog__item--sub">Методическая литература</a> 
      <a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=3510272" class="b-menu-catalog__item b-menu-catalog__item--sub">Педагогика и психология</a> 
      <a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=3043303" class="b-menu-catalog__item b-menu-catalog__item--sub">Готовимся к экзаменам</a> 
      <a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=3497701" class="b-menu-catalog__item b-menu-catalog__item--sub">Естественные науки</a> 
      <a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=169155" class="b-menu-catalog__item b-menu-catalog__item--sub">Гуманитарные науки</a> 
      <a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=5209724" class="b-menu-catalog__item b-menu-catalog__item--sub">Мировая художественная культура</a> 
      <a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=5209725" class="b-menu-catalog__item b-menu-catalog__item--sub">Языкознание</a> 
      <a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=169129" class="b-menu-catalog__item b-menu-catalog__item--sub">Художественная литература</a> 
      <a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=5209727" class="b-menu-catalog__item b-menu-catalog__item--sub">Великие и знаменитые</a> 
      <a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=3238592" class="b-menu-catalog__item b-menu-catalog__item--sub">Интеллектуальное развитие</a> 
      <a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=169184" class="b-menu-catalog__item b-menu-catalog__item--sub">Энциклопедии</a> 
      <a href="http://localhost/;school/index.php?page=razdel&amp;sel_node=2918232" class="b-menu-catalog__item b-menu-catalog__item--sub">Периодика</a> 
      <div style="clear: both;"></div> 
    </div> 
  </div> 
  <div class="b-menu-catalog__item b-menu-catalog__item--green b-menu-catalog__item--parent"> 
    <span>Предметы</span> 
    <div class="b-menu-catalog__sub"> 
      <a href="http://localhost/;school/index.php?page=disciplini&amp;d=22" class="b-menu-catalog__item b-menu-catalog__item--sub">Алгебра</a> 
      <a href="http://localhost/;school/index.php?page=disciplini&amp;d=27" class="b-menu-catalog__item b-menu-catalog__item--sub">Биология</a> 
      <a href="http://localhost/;school/index.php?page=disciplini&amp;d=19" class="b-menu-catalog__item b-menu-catalog__item--sub">География</a> 
      <a href="http://localhost/;school/index.php?page=disciplini&amp;d=23" class="b-menu-catalog__item b-menu-catalog__item--sub">Геометрия</a> 
      <a href="http://localhost/;school/index.php?page=disciplini&amp;d=42" class="b-menu-catalog__item b-menu-catalog__item--sub">История</a> 
      <a href="http://localhost/;school/index.php?page=disciplini&amp;d=14" class="b-menu-catalog__item b-menu-catalog__item--sub">Литература</a> 
      <a href="http://localhost/;school/index.php?page=disciplini&amp;d=4" class="b-menu-catalog__item b-menu-catalog__item--sub">Русский язык</a> 
      <a href="http://localhost/;school/index.php?page=disciplini&amp;d=28" class="b-menu-catalog__item b-menu-catalog__item--sub">Физика</a> 
      <a href="http://localhost/;school/index.php?page=disciplini&amp;d=29" class="b-menu-catalog__item b-menu-catalog__item--sub">Химия</a> 
    </div> 
  </div>