Почему подменю в мобильном телефоне открывается в верхней части меню, а не сдвигает меню вниз? - PullRequest
Новая
       5

Почему подменю в мобильном телефоне открывается в верхней части меню, а не сдвигает меню вниз?

0 голосов
/ 13 января 2019

Я хочу, чтобы мое подменю в мобильном представлении работало как this , но вместо этого, если вы перейдете в мобильное представление и нажмете вкладку "Службы", оно не откроется как this . Если вы удалите положение: статическое; только на экране @media и (max-width: 798px) 

.nav-dropdown {
    position: static; */
}

оно покажет подменю «веб-дизайн», но оно просто расположено в верхней части меню, нажимая на него и вставляя между ними, как в навигации, с которой я пытаюсь использовать. Вот мой код: 

<ul class="nav-list">
  <li>
    <a href="/">Home</a>
  </li>
  <li>
    <a href="/#about">About</a>
  </li>
  <li>
    <a href="#!">Services</a>
      <ul class="nav-dropdown">
  <li>
    <a href="/web-design">Web Design</a>
  </li>
  <!--<li>-->
  <!--    <a href="#!">Web Development</a>-->
  <!--</li>-->
  <!--<li>-->
  <!--    <a href="#!">Graphic Design</a>-->
  <!--</li>-->
</ul>

CSS: 

@media only screen and (max-width: 798px) {


.nav-mobile {
    display: block;
  }

  nav {
    width: 100%;
    padding: 50px 0 15px;
  }
  nav ul {
    display: none;
  }
  nav ul li {
    float: none;
  }
  nav ul li a {
    padding: 15px;
    line-height: 20px;
  }
  nav ul li ul li a {
    padding-left: 30px;
  }

  .nav-dropdown {
    position: static;
  }
}

1 Ответ

0 голосов
/ 13 января 2019 
nav ul li {
height: 50px;
}

дает каждому li жесткую высоту 50 пикселей, если вы измените это в своем мобильном медиа-запросе на: 

nav ul li {
height: inherit;
}

это должно позволить li двигаться вниз, так как раскрывающийся список расширяется и решает проблему. Надеюсь, это поможет.

...