:hover не работает

345

27 октября 2017, 12:51

Не работает hover

* { 
  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>

Answer 1

Во-первых надо писать:

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

Во-вторых: когда ты написал ul li * { display: none; }, то ты скрыл все элементы у родителя, в том числе и ul. Соответственно ты пишешь #menu1:hover #menu11{ display: block; }, однако при этом его родитель ul всё также display: none;