可折叠导航栏未按预期工作并创建不必要的填充（不使用引导程序）

Question

我正在尝试创建一个简单的导航栏，当调整大小（缩小）时会创建一个小菜单，一旦点击就会显示链接，就像Bootstrap一样。

问题1 ：调整大小后链接会按预期消失，但是当我展开迷你菜单（点击显示导航）时，链接（链接1，链接2等）会显示在我的身上徽标，一般在一般的地方（我希望链接能够整齐地显示出来，如下图所示）。

第2期：正如您将在下面看到的图片所示，我所拥有的代码由于某种原因导致每个<li>之间出现差距。

这是一个小提琴，用于显示问题和使用的代码：https://jsfiddle.net/n00jg7xy/

Answer 1

关于填充的第二个问题，问题在于：

#nav > ul > li{
  width: 25%; //Here you are forcing to 1/4 of the space, remove this line
  height: 100%;
  float: left;
}

我不知道代码段大小是否会让您看到更改here is the fiddle。

#wrapper{
    width: 100%;
    height: auto;
}

#header{
    height: auto;
    border-bottom: 1px solid black;
}

#logo {
    float: left;
}

/******************* Main Navigation ************************/

.mainNav{
    margin: 10px; 
}

#nav > a{
    display: none;
}

#nav li{
    position: relative;
}
 
#nav > ul{
    height: 3.75em;
}

#nav > ul > li{
    height: 100%;
    float: left;
}

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

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

@media only screen and ( max-width: 40em ){
    #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:target > ul
        {
            display: block;
        }
        #nav > ul > li
        {
            width: 100%;
            float: none;
        }
 
    /* second level */
 
    #nav li ul
    {
        position: static;
    }
}

/***********************/

/* Remove margins and padding from the list*/
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Float the list items side by side */
ul.topnav li {
    float: left;
}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 14px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {
    background-color: #f9f9f9;
    color: darkred;
    transition: 0.3s;
}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {
    display: none;
}

/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

<div id="wrapper">

  <p>
    Resize the window
  </p>
  <div id="header">
    <div><img id="logo" src="http://i65.tinypic.com/352i0jq.jpg" alt="logo" href="#"> </div>
    <div class="mainNav">
      <nav id="nav" role="navigation">
        <a href="#nav" title="Show navigation">Show navigation</a>
        <a href="#" title="Hide navigation">Hide navigation</a>
        <ul class="topnav" id="myTopnav">
          <li><a href="#">Home</a></li>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#"> Link 3</a></li>
          <li><a href="#"> Link 4</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>
<!-- wrapper closed-->