How to make Medium.com like Navbar - html

Question

Is there a way to make medium.com like Navbar that can be scroll horizontally in touch devices. The best the way if there is no js is requier because I need it clean with css.
Here is how far I've got. But there is a scroll bar appearing in desktop browsers while the medium.com's navbar is not.
ul {
width: 300px;
list-style: none;
overflow-y: auto;
white-space: nowrap;
}
ul li {
display: inline;
padding: 10px;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Sports</li>
<li>International</li>
<li>Political</li>
<li>TV News</li>
<li>About</li>
<li>Contact</li>
</ul>
JSFiddle

Answer 1

You need to use overflow-x.
CODEPEN
Add this between your tags. This is for responsive design.
<meta name="viewport" content="width=device-width, initial-scale=1">
CSS
ul {
width: 300px;
list-style: none;
overflow-x: auto;
white-space: nowrap;
background-color: #000;
padding: 20px 10px;
}
ul li {
display: inline;
padding: 10px;
color: #fff;
}
#media screen and (min-width: 768px) {
ul {
display: none;
}
}
HTML
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
</ul>

Answer 2

ul {
list-style: none;
padding: 10px;
width: 100%;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
overflow-y:hidden;
overflow-x: scroll;
display:inline-flex;
}
ul li {
display: inline-block;
padding: 5px;
}
ul li a{
text-decoration: none;
color: gray;
}
ul li a:hover{
color: black;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Sports</li>
<li>International</li>
<li>Political</li>
<li>TV </li>
<li>Political</li>
<li>TV </li>
<li>Political</li>
<li>TV </li>
<li>Political</li>
<li>TV </li>
<li>Home</li>
<li>News</li>
<li>Home</li>
<li>News</li>
</ul>