0

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

.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"), но этого не происходит.

1
  • 2
    Как вы себе вообще представляете hover у невидимого элемента? 2 ноя 2016 в 9:32

1 ответ 1

3

Потому что ховер надо вешать не на сам элемент, а его родитель. Еще в первом случае инлайн стили 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>

4
  • А что нужно поправить/добавить, чтобы появляющийся блок оттеснял те, что находятся под ним? В случае с "Каталог" - блок появлялся бы, и оттеснял пункт меню "Предметы"? С display понял. 2 ноя 2016 в 9:27
  • Почему position: relative в данном случае не делает этого? Этот вопрос даже важнее. 2 ноя 2016 в 9:32
  • 1
    Потому что у вас высота строго задана у .b-menu-catalog__item--select, .b-menu-catalog__item--parent. Добавил пример, где "Каталог" - блок появляется и оттесняет пункт меню "Предметы". Еще можете пройти курс Мастерская: создаём меню там похожее меню делается
    – stackanon
    2 ноя 2016 в 9:43
  • А, теперь понятно. спасибо! 2 ноя 2016 в 9:48

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.