Выпадающие ссылки не отображаются при зависании

После долгого перерыва с HTML/CSS я недавно создал меню с выпадающими ссылками, используя метод, который я использовал раньше, и с удивлением обнаружил, что это приложение из них не работает.Выпадающие ссылки не отображаются при зависании

Я использовал этот

ul li:hover ul{ display:block;}

, чтобы «включить» мое меню при наведении курсора мыши, но они просто не появляются. Я пробовал добавлять теги div вокруг различных блоков кода безрезультатно. Какие трюки мне не хватает?

jsfiddle здесь: https://jsfiddle.net/qccs4mLL/

источник

2015-09-11 maripeza

Ваш HTML не выравнивать с селектором CSS.

ul.menu li:hover > ul { 
    display: block; 
    background: green; 
}

Существует не ul элемента, который является прямым потомком li элемента. Вы можете изменить свой html так, чтобы ul был прямым ребенком li.

body { 
 
    margin: 0px; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    width: 8em; 
 
    /*width of each link*/ 
 
} 
 
/*format list*/ 
 

 
ul { 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
ul.menu { 
 
    height: 2.5em; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 0; 
 
    background-color: #454545; 
 
} 
 
ul.menu li { 
 
    float: left; 
 
    position: relative; 
 
} 
 
ul.menu li a { 
 
    cursor: pointer; 
 
    display: block; 
 
    color: white; 
 
    line-height: 2.5em; 
 
    padding: 0 10px; 
 
} 
 
ul.menu ul { 
 
    background: #555; 
 
    display: none; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 100%; 
 
} 
 
ul.menu li:hover { 
 
    background: red; 
 
} 
 
ul.menu li:hover > ul { 
 
    display: block; 
 
    background: green; 
 
}

<body> 
 
    <!--Heading--> 
 
    <!--Should change when scrolled down/on mobile--> 
 

 
    <h1 class="heading">Title</h1> 
 

 
    <!--Create Menus--> 
 
    <nav> 
 
    <ul class="menu"> 
 
     <li><a href="index.html">link1</a> 
 
     <ul> 
 
      <li><a href="#">sublink1</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <!--menu options with sub options have dropdown on computer, may unfold with tap on mobile or just be a click since they all go to one page maybe? maybe go with unfolding.--> 
 

 
     <li><a href="#">link2</a> 
 
     <ul> 
 
      <li><a href="#">sublink1</a> 
 
      </li> 
 
      <li><a href="#">sublink2</a> 
 
      </li> 
 
      <li><a href="#">sublink3</a> 
 
      </li> 
 
      <li><a href="#">sublink4</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 

 
     <li><a href="#">link3</a> 
 
     </li> 
 
     <li><a href="#">link4</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</body>

источник

2015-09-11 15:19:20

Выпадающие ссылки не отображаются при зависании

ответ

Смежные вопросы