html - 我怎样才能让这个响应式导航工作？

Question

我希望它像一个响应式下拉菜单一样运行，但就在悬停时，一旦它达到 600 像素或更小，我就无法将其全部正确放置。感谢任何帮助，谢谢 :) 我想做到这一点，这样你就可以看到第一个 <li>当浏览器更小而不是全部时

body{border:0px;margin:0px;}

ul {
  list-style-type:none;
  display:block;
  width:100%;
  height:50px;
  background:#000000;
  padding:0px;
  margin:0px;
  border:0px;
  position:fixed;
}

li {
  display:inline-block;
  float:left;
  width:16.666666667%;
  height:50px;
  text-align:center;
  line-height:50px;
}

#one{background:#836749;}
#two{background:#629492;}
#three{background:#927493;}
#four{background:#482057;}
#five{background:#293047;}
#six{background:#927403;}


#one:hover{background:#000000;}
#two:hover{background:#000000;}
#three:hover{background:#000000;}
#four:hover{background:#000000;}
#five:hover{background:#000000;}
#six:hover{background:#000000;}

ul li a{
  text-decoration:none;
  color:#FFFFFF;
}


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

ul{
  position:absolute;
  border:0px;
  padding:0px;
  margin:auto;
  height:14.28571428571429%;
  overflow:hidden;
  width:100%;
  background:#038493;
}

ul:hover {
  position:absolute;
  width:100%;
  height:100%;
  margin:auto;
  border:0px;
  padding:0px;
}

li {
  width:100%;
  height:auto:
  background:#038493;
  text-align:center;
  float:left;
}

li:hover {height:14.28571428571429%;}
}

 <ul>
   <a href="#"><li id="one">link</li></a>
    <a href="#"><li id="two">link</li></a>
    <a href="#"><li id="three">link</li></a>
    <a href="#"><li id="four">link</li></a>
    <a href="#"><li id="five">link</li></a>
    <a href="#"><li id="six">link</li></a>
  </ul>

Answer 1

如果导航栏中的链接数量保持不变，您可以使用 width: 16.6%;作为 css 标签。

CSS:

#one, #two, #three, #four, #five, #six {
 
  
  width: 16.6%;
  float: left;
  margin: 0px 0px 0px 0px;
  text-decoration: none;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 15px;
}

#one:hover, #two:hover, #three:hover, #four:hover, #five:hover, #six:hover {
    background-color: #000;
}

a {
  color: #FFF;
}

#one {
    background-color: red;  
}

#two {
    background-color: blue;  
}

#three {
    background-color: green;  
}

#four {
    background-color: black;  
}

#five {
    background-color: #AAA;  
}

#six {
    background-color: #555;  
}

<a id="one" href="#one">One</a>
<a id="two" href="#two">Two</a>
<a id="three" href="#three">Three</a>
<a id="four" href="#four">Four</a>
<a id="five" href="#five">Five</a>
<a id="six" href="#six">Six</a>

要使导航栏固定在页面的两侧，您应该使用 <nav> -标签和<li> -改为标签。