Как создать/исправить вкладки вертикальной навигации для мобильных пользователей?

Question

я не знаю, как на самом деле объяснить это простой вопрос за титул, но у меня есть пример страница, чтобы показать вам, что я имею в виду http://www.yenrac.net/test

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

Вот мой HTML: http://pastebin.com/RkFs97wH

<nav> 
    <ul id="navigation"> 
    <li><a id="current" href="index.html">Home</a></li> 
    <li><a href="#">FAQ</a></li> 
    <li><a class="dropdown" href="#">Dropdown</a> 
     <ul> 
     <li> 
      <a class="pullout" href="#">Pullout Tab</a> 
      <ul> 
      <li><a href="#">Tier 3 Tab</a></li> 
      </ul> 
     </li> 
     <li> 
      <a class="pullout" href="#">Pullout Tab 2</a> 
      <ul> 
      <li><a href="#">Tier 3 Tab</a></li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    <li><a href="#">Servers</a></li> 
    <li id="last"><a href="#">Contact Us</a></li> 
    </ul> 
</nav> 

Вот мой CSS: http://pastebin.com/ttYh0Qz6

/* Set to very large range just for convenience of testing */ 
    @media screen and (max-width: 10000px) { 
    #postdatemeta { 
     visibility: visible; 
    } 

    .postdate { 
     visibility: hidden; 
    } 

    nav ul { 
     list-style-type: none; 
     margin: 0 auto;; 
     padding: 0; 
     width: 98%; 
    } 

    nav li a { 
     display: block; 
     color: #fff; 
     padding: 1em 0; 
     margin: 0.3em auto;; 
     text-decoration: none; 
     text-align: center; 
     background: #000; 
    } 

    nav ul ul { 
     position: absolute; 
     visibility:hidden; 
    } 

    nav ul li:hover > ul { 
     visibility: visible; 
     position: relative; 
    } 

    nav ul ul li a { 
     background: #999; 
    } 

    .pullout:after { 
     content: "\000020\0025BE"; 
    } 

Я признателен за любую помощь и обратную связь вы в состоянии предоставить мне!

Answer 1

Вы добавляете margin к a элемента, но элемент родительского li игнорирует эти поля в настоящее время, так что при наведении курсора на полях, она признает вас, как перемещая мышь прочь li, поэтому :hover состояние уходит в результате чего произошло свернутое меню.

Попробуйте добавить следующее:

nav li { 
    width: 100%; 
    display: inline-block; 
} 

Это позволяет li элемент обернуть a элемент, включая обочину, поэтому, когда они наведении мышки, то :hover состояние остается.

@media screen and (max-width: 10000px) { 
 
    nav ul { 
 
    list-style-type: none; 
 
    margin: 0 auto; 
 
    ; 
 
    padding: 0; 
 
    width: 98%; 
 
    } 
 
    nav li { 
 
    width: 100%; 
 
    display: inline-block; 
 
    } 
 
    nav li a { 
 
    display: block; 
 
    color: #fff; 
 
    padding: 1em 0; 
 
    margin: 0.3em auto; 
 
    ; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    background: #000; 
 
    } 
 
    nav ul ul { 
 
    position: absolute; 
 
    visibility: hidden; 
 
    } 
 
    nav ul li:hover > ul { 
 
    visibility: visible; 
 
    position: relative; 
 
    } 
 
    nav ul ul li a { 
 
    background: #999; 
 
    } 
 
    .pullout:after { 
 
    content: "\000020\0025BE"; 
 
    } 
 
}

<nav> 
 
    <ul id="navigation"> 
 
    <li><a id="current" href="index.html">Home</a> 
 
    </li> 
 
    <li><a href="#">FAQ</a> 
 
    </li> 
 
    <li><a class="dropdown" href="#">Dropdown</a> 
 
     <ul> 
 
     <li> 
 
      <a class="pullout" href="#">Pullout Tab</a> 
 
      <ul> 
 
      <li><a href="#">Tier 3 Tab</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a class="pullout" href="#">Pullout Tab 2</a> 
 
      <ul> 
 
      <li><a href="#">Tier 3 Tab</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Servers</a> 
 
    </li> 
 
    <li id="last"><a href="#">Contact Us</a> 
 
    </li> 
 
    </ul> 
 
</nav>