html - ナビゲーションのまとめ

Question

レスポンシブの小さなナビゲーションが機能せず、その理由がわかりません。2行目に折り返されますが、CSSには実際に幅を設定するものがないため、発生しないはずです。URLはこちら

さまざまな幅、パディングを設定してみました..時々うまくいくように見えますが、ウィンドウで遊ぶとすぐに、何も変更していないかのように再び移動するので、迷子になります。

もちろん、悪いことに、何らかの考えが生じた場合の視覚的な問題を示したかっただけです。

私が使用するナビゲーションは次のとおりです。

.nav-wrapper {
  padding: 5% 0;
}

.table {
  display: table;
  margin: 0 auto;
  padding: 0;
}

#nav {
  /* container */
}

#nav>a {
  display: none;
}

#nav li {
  position: relative;
}


/* first level */

#nav>ul {
  list-style-type: none;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

#nav>ul>li {
  margin: 0;
  padding: 0 2%;
  font-family: 'helvetica neue', arial, sans-serif;
  text-transform: uppercase;
  float: left;
  font-size: 0.8em;
}


/* second level */

#nav li ul {
  display: none;
  position: absolute;
  top: 100%;
}

#nav li:hover ul {
  display: block;
}

@media only screen and ( max-width: 40em) {
  /* 640 */
  #nav {
    position: relative;
  }
  #nav>a {}
  #nav:not( :target)>a:first-of-type,
  #nav:target>a:last-of-type {
    display: block;
  }
  /* first level */
  #nav>ul {
    height: auto;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
  }
  #nav>ul.active {
    display: block;
  }
  #nav>ul>li {
    width: 100%;
    float: none;
  }
  /* second level */
  #nav li ul {
    position: static;
  }
}

<section>
  <div class='nav-wrapper'>
    <div class='table'>
      <nav id="nav" role="navigation">
        <a href="#nav" title="Show navigation">Show navigation</a>
        <a href="#" title="Hide navigation">Hide navigation</a>
        <ul>
          <li><a href="/">Home</a></li>
          <!--Blog-->
          <li><a href="/">Profile</a></li>
          <li><a href="/">Web Design</a></li>
          <li><a href="graphicdesign.php">Graphic Design</a></li>
          <li><a href="/">Resources</a></li>
        </ul>
      </nav>
    </div>
  </div>
</section>