CSS не зависает - PullRequest
Новая
       23

CSS не зависает

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

Я новичок в CSS, и я пытался создать очень простую панель навигации.

Мои HTML и CSS приведены ниже.

Проблема заключается в том, что при наведении курсора на вкладку ОСОБЕННОСТИничего не происходит, хотя я изменил feature-menu дисплеи, чтобы изогнуть ни один при зависании.

Я не могу найти ошибку в моем коде.Может кто-нибудь сказать, пожалуйста, где я ошибся? 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
  background: #D6E9FE;
  position: fixed;
  width: 100%;
  padding: 50px;
}

.menu {
  display: flex;
  justify-content: space-between;
}

.menu li {
  padding: 20px;
  margin-right: 15px;
}

body {
  height: 1200px;
  font-size: 18px;
  font-family: sans-serif;
  color: #5D6063;
}

.dropdown span:hover .features-menu {
  display: flex;
  flex-direction: column;
  background: #B2D6FF;
  border-radius: 5px;
  padding-top: 60px;
  position: absolute;
  top: 50px;
  left: 990px;
}

.features-menu li {
  list-style: none;
  border-bottom: 1px solid #FFF;
  padding: 0 40px 10px 20px;
  margin: 10px;
}

.dropdown>span {
  z-index: 2;
  position: relative;
  cursor: pointer;
}

.features-menu {
  z-index: 1;
  display: none;
}
<div class='header'>
  <div class='logo'><img src='...' /></div>
  <ul type="none" class='menu'>
    <li class='dropdown'><span>Features ▾</span></li>
    <ul class='features-menu'>
      <li><a href='#'>Harder</a></li>
      <li><a href='#'>Better</a></li>
      <li><a href='#'>Faster</a></li>
      <li><a href='#'>Stronger</a></li>
    </ul>
    <li><a href='#'>Blog</a></li>
    <li><a href='#'>Subscribe</a></li>
    <li><a href='#'>About</a></li>
  </ul>
</div>

1 Ответ

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

Давайте рассмотрим вашу HTML-структуру.

Вот соответствующая часть: 

<ul type="none" class='menu'>
   <li class='dropdown'><span>Features ▾</span></li>
   <ul class='features-menu'>
      <li><a href='#'>Harder</a></li>
      <li><a href='#'>Better</a></li>
      <li><a href='#'>Faster</a></li>
      <li><a href='#'>Stronger</a></li>
   </ul>
   <li><a href='#'>Blog</a></li>
    .
    .
    .

Вот CSS-селектор, который вы применяете: 

.dropdown span:hover .features-menu

Итак, проблемаясно.

Вы идете с одного уровня (.dropdown), вниз на уровень (до span), а затем обратно на уровень (до .features-menu).

Вы пытаетесь нацелиться на .features-menu из элемента, расположенного ниже в структуре HTML.CSS не работает таким образом.

CSS может ориентироваться только вниз или вперед.Он не может быть направлен вверх или назад.

Эти понятия подробно объясняются в следующих статьях:

Вы можете заставить работать зависание, нацеливаясь на «вперед» (используя исходный - искаженный - HTML), используя комбинаторы одноуровневых элементов(+ или ~). 

.dropdown:hover + .features-menu


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
  background: #D6E9FE;
  position: fixed;
  width: 100%;
  padding: 50px;
}

.menu {
  display: flex;
  justify-content: space-between;
}

.menu li {
  padding: 20px;
  margin-right: 15px;
}

body {
  height: 1200px;
  font-size: 18px;
  font-family: sans-serif;
  color: #5D6063;
}

.dropdown:hover + .features-menu {
  display: flex;
  flex-direction: column;
  background: #B2D6FF;
  border-radius: 5px;
  padding-top: 60px;
  position: absolute;
  top: 50px;
  /* left: 990px; */
}

.features-menu li {
  list-style: none;
  border-bottom: 1px solid #FFF;
  padding: 0 40px 10px 20px;
  margin: 10px;
}

.dropdown>span {
  z-index: 2;
  position: relative;
  cursor: pointer;
}

.features-menu {
  z-index: 1;
  display: none;
}
<div class='header'>
  <div class='logo'><img src='...' /></div>
  <ul type="none" class='menu'>
    <li class='dropdown'><span>Features ▾</span></li><!-- closing tag doesn't go here -->
    <ul class='features-menu'>
      <li><a href='#'>Harder</a></li>
      <li><a href='#'>Better</a></li>
      <li><a href='#'>Faster</a></li>
      <li><a href='#'>Stronger</a></li>
    </ul>
    <li><a href='#'>Blog</a></li>
    <li><a href='#'>Subscribe</a></li>
    <li><a href='#'>About</a></li>
  </ul>
</div>

Или вы можете заставить ваше поведение зависания работать с таргетингом «вниз» (используя правильно сформированный HTML), используя селекторы-потомки (> или [space]). 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
  background: #D6E9FE;
  position: fixed;
  width: 100%;
  padding: 50px;
}

.menu {
  display: flex;
  justify-content: space-between;
}

.menu li {
  padding: 20px;
  margin-right: 15px;
}

body {
  height: 1200px;
  font-size: 18px;
  font-family: sans-serif;
  color: #5D6063;
}

.dropdown:hover > .features-menu {
  display: flex;
  flex-direction: column;
  background: #B2D6FF;
  border-radius: 5px;
  padding-top: 60px;
  position: absolute;
  top: 50px;
  /* left: 990px; */
}

.features-menu li {
  list-style: none;
  border-bottom: 1px solid #FFF;
  padding: 0 40px 10px 20px;
  margin: 10px;
}

.dropdown>span {
  z-index: 2;
  position: relative;
  cursor: pointer;
}

.features-menu {
  z-index: 1;
  display: none;
}
<div class='header'>
  <div class='logo'><img src='...' /></div>
  <ul type="none" class='menu'>
    <li class='dropdown'><span>Features ▾</span>
      <ul class='features-menu'>
        <li><a href='#'>Harder</a></li>
        <li><a href='#'>Better</a></li>
        <li><a href='#'>Faster</a></li>
        <li><a href='#'>Stronger</a></li>
      </ul>
    </li><!-- closing tag goes here -->
    <li><a href='#'>Blog</a></li>
    <li><a href='#'>Subscribe</a></li>
    <li><a href='#'>About</a></li>
  </ul>
</div>
...