: hover does not work

Question

Hover does not work

* { padding: 0; margin: 0; } li { list-style: none; } .main>ul>li { float: left; margin-left: 300px; margin-top: 150px; } ul li * { display: none; } #menu1:hover#menu11 { display: block; }

 <div class="main"> <ul> <li id="menu1">menu1 <ul> <li id="menu11">menu1.1 <ul> <li>menu1.1.1</li> <li>menu1.1.1</li> <li>menu1.1.1</li> <li>menu1.1.1</li> </ul> </li> <li>menu1.1</li> <li>menu1.1</li> <li>menu1.1</li> </ul> </li> <li>menu2</li> <li>menu3</li> <li>menu4</li> </ul> </div>

@teran space yes. but in general, this is not a mistake - Alexey Shimansky

Answer 1 · 2017-10-24T21:12:43

First, you need to write:

 #menu1:hover #menu11 ^--- тут пробел

Secondly - when you wrote this:

 ul li * { display: none; }

then you hid ALL the elements at the parent (ul li), including the elements ul .

Accordingly, when you write

 #menu1:hover #menu11{ display: block; }

it says only the li#menu11 element is li#menu11 . At the same time at this very moment his parent ul still also display: none; and its descendant ul everything is also display: none; . And since the parent is invisible, how can the child appear? No Therefore, it is necessary to change the display logic of the selectors.

I don’t know the whole idea, but maybe instead of ul li * { ... } you just need to write ul li li { ... } -

but in this case I refer to what is inside the li element and not to ul.
:( You told ALL elements to be display: none; .... and then say li to #menu11 , display: block; but, at the same time, its parent ul has display: none; and its the descendant of ul also has display: none; ... And since the parent is invisible, how can the child be displayed? None. if you don’t see it as such, how do you get this content?)) from nowhere
@ArtashesMuradyan I do not know the whole idea, maybe you should just write ul li li { display: none; }

: hover does not work

1 answer 1

More articles: