How can I make this responsive navigation work?

Question

I want it to act like a responsive drop down menu but just upon hover, I can't get it to all sit properly once its at 600px or smaller. Any help is appreciated, thanks :) I want to make it so you can just see the first <li> when the browser is smaller instead of all of them

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

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>

Answer 2

If the number of links which are in your navigation bar stays the same, you can use width: 16.6%; as a css tag.

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>

To make the navigation-bar stick to the sides of your page, you should use the <nav>-Tag and <li>-Tags instead.