如何使这种响应式导航工作

Question

我希望它能像一个响应式下拉菜单一样运行，但只要悬停，一旦它达到600px或更小，我就无法让它全部正常运行。感谢您的帮助：）我想这样做，当浏览器变小时，您就可以看到第一个<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>-标记。

Answer 2

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: relative;
    border: 0px;
    padding: 0px;
    margin: auto;
    max-height: 50px;
    height: 50px;
    overflow: hidden;
    width: 100%;
    background: #038493;
  }
  ul:hover {
    position: relative;
    width: 100%;
    max-height: 100%;
    height: 100%;
    margin: auto;
    border: 0px;
    padding: 0px;
  }
  li {
    width: 100%;
    height: auto: background: #038493;
    text-align: center;
    float: left;
  }
  li:hover {
    height: 50px;
  }
}

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