How can I create/fix vertical navigation tabs for mobile responsive browsing?

Question

I don't know how to really explain this in a simple question for the title, but I have an example page to show you what I mean at http://www.yenrac.net/test

I am having problems with dropdown menus, as you can see. Whenever I hover over to the next category in the dropdown 'accordion' it jumps back and screws with desktop cursors if they have their browser in a small window. Another thing is that mobile users cannot just click the box link again to close the dropdown, which is something else I would like to fix. Can someone please take a look at this and help me figure out what I am doing wrong?

Here is my 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>

Here is my 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";
    }

I appreciate any help and feedback you are able to provide me!

Answer 1

You are adding a margin to the a element, but the parent li item ignores these margins currently, so when you mouse over the margins, it recognizes you as moving the mouse off of the li, so the :hover state goes away resulting in a collapsed menu.

Try add the following:

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

This allows the li element to wrap the a element including the margins, so when they are moused over, the :hover state remains.

@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>