Сделать отображение вложенного элемента списка при наведении курсора - PullRequest
Новая
       5

Сделать отображение вложенного элемента списка при наведении курсора

0 голосов
/ 21 декабря 2018

Я пытаюсь сделать складное / расширяемое меню панели навигации.У меня есть целевой элемент, но я не могу отобразить подменю при наведении курсора.

Я бы хотел оставить HTML как есть и не использовать какие-либо классы, если это возможно, я хотел бы изучить основы выполнения этого без классов, чтобы лучше понять, что я делаюв манипулировании HTML-элементами.Главное в этом - просто освоиться с доступом к элементам. 

ul {
  list-style: none;
}

ul li a {
  color: white;
  display: none;
}

ul li:hover a {
  display: block;
  background-color: red;
}

ul ul li {
  background-color: pink;
  color: white;
}

ul ul li:hover ul a {
  display: block;
  background-color: purple;
}
<nav>
<ul>
  <li>Music</li>
    <ul>
      <li>Songs</li>
        <ul>
          <li><a href="#">Blue Slide Park</a></li>
          <li><a href="#">What's The Use</a></li>
          <li><a href="#">Hurt Feelings</a></li>
          <li><a href="#">Fight The Feeling</a></li>
        </ul>
      <li>Albums</li>
        <ul>

          <li><a href="#">Blue Slide Park</a></li>
          <li><a href="#">WMWTSO</a></li>
          <li><a href="#">GO:OD AM</a></li>
          <li><a href="#">The Devine Feminine</a></li>
          <li><a href="#">Swimming</a></li>
        </ul>
    </ul>
  <li>Videos</li>
    <ul>
      <li><a href="#">Objects</a></li>
      <li><a href="#">Dang!</a></li>
      <li><a href="#">Weekend</a></li>
      <li><a href="#">Killin' Time</a></li>
      <li><a href="#">My Favorite Part</a></li>
      <li><a href="#">Best Day Ever</a></li>
    </ul>
  <li>About</li>
</ul>
</nav>

1 Ответ

0 голосов
/ 21 декабря 2018

У вас неправильная структура разметки HTML.

Кроме того, вы должны обрабатывать только отображение <ul> вместо <a>, например: 

nav > ul ul {
  display: none;
}
nav > ul > li:hover > ul,
nav > ul > li > ul > li:hover > ul {
  display: block;
}
<nav>
  <ul>
    <li>Music
      <ul>
        <li>Songs
          <ul>
            <li><a href="#">Blue Slide Park</a></li>
            <li><a href="#">What's The Use</a></li>
            <li><a href="#">Hurt Feelings</a></li>
            <li><a href="#">Fight The Feeling</a></li>
          </ul>
        </li>
        <li>Albums
          <ul>
            <li><a href="#">Blue Slide Park</a></li>
            <li><a href="#">WMWTSO</a></li>
            <li><a href="#">GO:OD AM</a></li>
            <li><a href="#">The Devine Feminine</a></li>
            <li><a href="#">Swimming</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Videos
      <ul>
        <li><a href="#">Objects</a></li>
        <li><a href="#">Dang!</a></li>
        <li><a href="#">Weekend</a></li>
        <li><a href="#">Killin' Time</a></li>
        <li><a href="#">My Favorite Part</a></li>
        <li><a href="#">Best Day Ever</a></li>
      </ul>
    </li>
    <li>About</li>
  </ul>
</nav>

Надеюсь, это поможет вам.

...