How to convert website menu to select box Dropdown menu in small screen?

I want to share a quick code to convert website menu to select box or drop down menu in small screens. You can also say it responsive design for menu items in websites. This is in pure html and CSS  no JavaScript. It will be good for small website with 5-6 menu items only. Because for many menu items it will be some times bored to write manually menu in different style. We can also use java script for dynamic generated menus (Will discussed in next post).

Below 2 images will make you clear this example is about.

Below is the full screen snapshot. In full screen , menus are horizontal.

For small screen or mobile screens, you can see a drop down menu.

HTML –  HTML for 2 different style menu  is different. In below code, you can see different menu is being used. First  menu code is for full screen and second one is for mobile screen or small screens. I will use media queries for this task.

<nav>
<div id="logo"><img src="images/logo.png"></div>
<ul>
<li>Home </li>
<li>About Us</li>
<li>Services</li>
<li>Projects </li>
<li>People </li>
<li class="active">Contact Us</li>
</ul>
<select>
<option value="" selected="selected">Select</option>
]<option value="/">Home</option>
<option>Projcts</option>
<option >About Us</option>
<option selected="selected">Contact Us</option>
</select>
</nav>

i will make select box hidden by default. So i will use below css –

nav select {
  display: none;
}

For fullscreen, i will use below media query –

@media (max-width: 960px) {
  nav ul     { display: none; }
  nav select { display: inline-block; }
}

Below is the complete css that i used –

#header{
	background: #3C3938;
	width: 100%;
	height:68px;
	line-height: 68px;
}
#logo{
	float: left;
	width: 60%
}
#logo img{
	margin-left: 30%;
	vertical-align: middle;
}
/* menu css*/
nav {
  display: block;
  width: 100%;
}
nav ul {
  list-style: none;
 
}
nav li {
  display: inline-block;
  margin-left: 20px;
  color: #ffffff;
}
nav li.active{
	color: red;	
}

nav select {
  display: none;
}
@media (max-width: 960px) {
  nav ul     { display: none; }
  nav select { display: inline-block; }
}