/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS Bin</title>
<style id="jsbin-css">
.topnav{
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: black;
  border: 1px solid black;
  /* width: 100%; */
  /* overflow: hidden; */
}

.topnav li{
  float: left;
  /* padding: 10px; */
  border-right: 1px solid black;
}

.topnav li a.active{
  background: green;
}

.topnav li a:hover:not(.active){
  background: blue;
  color: white;
}
/* .topnav li a:hover{
  background: white;
  color: black;
}
 */

.topnav li a{
  display: block;
  padding: 10px;
  text-decoration: none;
  text-align: left;
  color: white;

}

.clearfix:after{
  content: '';
  display: table;
  clear: both;
}

.dropdown-content{
  display: none;
  position: absolute;
  width: 100px;
  background: blue;
}
.dropdown-content a:hover{
  background: red;
}

.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown .dropdown-content a:hover{
  background: red;
}


/* .topnav li.right{
  margin-right: 10px;
  float: right;
} */


@media screen and (max-width: 250px)  {
  .topnav li{
    float: none;
  }
}

@media screen and (min-width: 251px) and (max-width: 500px) {
  .topnav{
    width: 25%;
    float: left;
  }
  .topnav li{
    float: none;
  }
  .content{
    margin-left: 25%;
  }
}

</style>
</head>
<body>

<ul class="topnav clearfix">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="#contact" class="parent">Contact</a>
    <div class="dropdown-content">
      <a href="#1">first</a>
      <a href="#2">second</a>
      <a href="#3">Third</a>
    </div>
  </li>
  <li class="right"><a href="#about">About</a></li>
</ul>
  <div class="content " style="padding:0 16px;">
  <h2>Responsive Topnav Example</h2>
  <p>This example use media queries to stack the topnav vertically when the screen size is 600px or less.</p>
  <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
  <h4>Resize the browser window to see the effect.</h4>
</div>


<script id="jsbin-source-css" type="text/css">.topnav{
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: black;
  border: 1px solid black;
  /* width: 100%; */
  /* overflow: hidden; */
}

.topnav li{
  float: left;
  /* padding: 10px; */
  border-right: 1px solid black;
}

.topnav li a.active{
  background: green;
}

.topnav li a:hover:not(.active){
  background: blue;
  color: white;
}
/* .topnav li a:hover{
  background: white;
  color: black;
}
 */

.topnav li a{
  display: block;
  padding: 10px;
  text-decoration: none;
  text-align: left;
  color: white;

}

.clearfix:after{
  content: '';
  display: table;
  clear: both;
}

.dropdown-content{
  display: none;
  position: absolute;
  width: 100px;
  background: blue;
}
.dropdown-content a:hover{
  background: red;
}

.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown .dropdown-content a:hover{
  background: red;
}


/* .topnav li.right{
  margin-right: 10px;
  float: right;
} */


@media screen and (max-width: 250px)  {
  .topnav li{
    float: none;
  }
}

@media screen and (min-width: 251px) and (max-width: 500px) {
  .topnav{
    width: 25%;
    float: left;
  }
  .topnav li{
    float: none;
  }
  .content{
    margin-left: 25%;
  }
}
</script>
</body>
</html>

## jsbin.punosid.css
.topnav{
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: black;
  border: 1px solid black;
  /* width: 100%; */
  /* overflow: hidden; */
}

.topnav li{
  float: left;
  /* padding: 10px; */
  border-right: 1px solid black;
}

.topnav li a.active{
  background: green;
}

.topnav li a:hover:not(.active){
  background: blue;
  color: white;
}
/* .topnav li a:hover{
  background: white;
  color: black;
}
 */

.topnav li a{
  display: block;
  padding: 10px;
  text-decoration: none;
  text-align: left;
  color: white;

}

.clearfix:after{
  content: '';
  display: table;
  clear: both;
}

.dropdown-content{
  display: none;
  position: absolute;
  width: 100px;
  background: blue;
}
.dropdown-content a:hover{
  background: red;
}

.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown .dropdown-content a:hover{
  background: red;
}


/* .topnav li.right{
  margin-right: 10px;
  float: right;
} */


@media screen and (max-width: 250px)  {
  .topnav li{
    float: none;
  }
}

@media screen and (min-width: 251px) and (max-width: 500px) {
  .topnav{
    width: 25%;
    float: left;
  }
  .topnav li{
    float: none;
  }
  .content{
    margin-left: 25%;
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.topnav{
	list-style-type: none;
	margin: 0;
	padding: 0;
	background: black;
	border: 1px solid black;
	/* width: 100%; */
	/* overflow: hidden; */
	}

	.topnav li{
	float: left;
	/* padding: 10px; */
	border-right: 1px solid black;
	}

	.topnav li a.active{
	background: green;
	}

	.topnav li a:hover:not(.active){
	background: blue;
	color: white;
	}
	/* .topnav li a:hover{
	background: white;
	color: black;
	}
	*/

	.topnav li a{
	display: block;
	padding: 10px;
	text-decoration: none;
	text-align: left;
	color: white;

	}

	.clearfix:after{
	content: '';
	display: table;
	clear: both;
	}

	.dropdown-content{
	display: none;
	position: absolute;
	width: 100px;
	background: blue;
	}
	.dropdown-content a:hover{
	background: red;
	}

	.dropdown:hover .dropdown-content {
	display: block;
	}
	.dropdown .dropdown-content a:hover{
	background: red;
	}


	/* .topnav li.right{
	margin-right: 10px;
	float: right;
	} */


	@media screen and (max-width: 250px) {
	.topnav li{
	float: none;
	}
	}

	@media screen and (min-width: 251px) and (max-width: 500px) {
	.topnav{
	width: 25%;
	float: left;
	}
	.topnav li{
	float: none;
	}
	.content{
	margin-left: 25%;
	}
	}

	</style>
	</head>
	<body>

	<ul class="topnav clearfix">
	<li><a class="active" href="#home">Home</a></li>
	<li><a href="#news">News</a></li>
	<li class="dropdown">
	<a href="#contact" class="parent">Contact</a>
	<div class="dropdown-content">
	<a href="#1">first</a>
	<a href="#2">second</a>
	<a href="#3">Third</a>
	</div>
	</li>
	<li class="right"><a href="#about">About</a></li>
	</ul>
	<div class="content " style="padding:0 16px;">
	<h2>Responsive Topnav Example</h2>
	<p>This example use media queries to stack the topnav vertically when the screen size is 600px or less.</p>
	<p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
	<h4>Resize the browser window to see the effect.</h4>
	</div>



	<script id="jsbin-source-css" type="text/css">.topnav{
	list-style-type: none;
	margin: 0;
	padding: 0;
	background: black;
	border: 1px solid black;
	/* width: 100%; */
	/* overflow: hidden; */
	}

	.topnav li{
	float: left;
	/* padding: 10px; */
	border-right: 1px solid black;
	}

	.topnav li a.active{
	background: green;
	}

	.topnav li a:hover:not(.active){
	background: blue;
	color: white;
	}
	/* .topnav li a:hover{
	background: white;
	color: black;
	}
	*/

	.topnav li a{
	display: block;
	padding: 10px;
	text-decoration: none;
	text-align: left;
	color: white;

	}

	.clearfix:after{
	content: '';
	display: table;
	clear: both;
	}

	.dropdown-content{
	display: none;
	position: absolute;
	width: 100px;
	background: blue;
	}
	.dropdown-content a:hover{
	background: red;
	}

	.dropdown:hover .dropdown-content {
	display: block;
	}
	.dropdown .dropdown-content a:hover{
	background: red;
	}


	/* .topnav li.right{
	margin-right: 10px;
	float: right;
	} */


	@media screen and (max-width: 250px) {
	.topnav li{
	float: none;
	}
	}

	@media screen and (min-width: 251px) and (max-width: 500px) {
	.topnav{
	width: 25%;
	float: left;
	}
	.topnav li{
	float: none;
	}
	.content{
	margin-left: 25%;
	}
	}
	</script>
	</body>
	</html>