Hover does not work

Question

There is the following code:

.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>

Please tell me why b-menu-catalog__sub does not work hover (it should turn around, taking its place and pushing the menu item "b-menu-catalog__sub"), but this does not happen.

How do you even imagine a hover from an invisible element? - Pavel Mayorov

Accepted Answer · 2016-11-02T09:07:40

Because the hover must be hung not on the element itself, but its parent. In the first case, inline style style="display: none;" interrupt any css. He left it so that it was visible.

 .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>

With a dropout, removed the height from .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>

And what should be corrected / added in order for the block to appear to push back those that are under it?
In the case of the "Catalog" - a block would appear, and push back the menu item "Items"?
Because your height is strictly set at .b-menu-catalog__item--select, .b-menu-catalog__item--parent .
He added an example where "Catalog" - a block appears and pushes the "Objects" menu item.
You can also complete the Workshop course : we create a menu there a similar menu is made

Hover does not work

1 answer 1

More articles: