Responsive navigation menu horizontal to drop down - html

Question

I would like to design a navigation menu that responds to the width of the page by changing the horizontal menu into a single button that drops down a menu when clicked on.
All the examples I've seen seem to use Javascript or JQuery. Is there a CSS only way of doing this?
My thought was to create two different <ul></ul> elements. One for the horizontal and one for a vertical drop down menu. And use media query to hide one depending on screen size. Can this be done using a single <ul></ul> element instead?

Answer 1

Here's one way to achieve a Bootstrapish functionality using CSS. It is also possible to add some smooth animation using CSS and I'll leave it up to you to work that one out and to optimize the code wherever necessary. (Resize the preview window to see the effect).
Fiddle: http://jsfiddle.net/875v00ge/.
HTML:
<nav>
<span tabindex = "1"></span>
<span></span>
<div class = "menuWrapper">
<ul>
<li>About</li>
<li>Company</li>
<li>FAQ</li>
<li>Contact</li>
<li>Help</li>
</ul>
</div>
</nav>
CSS:
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
a {
color: rgb(50, 50, 50);
text-decoration: none;
}
nav {
background-color: rgb(240, 240, 240);
border: 1px solid rgb(200, 200, 200);
border-radius: 5px;
display: table;
height: calc(14px * 3);
width: 95%;
margin: 25px auto;
position: relative;
}
nav span {
width: calc(14px * 1.5);
height: 14px;
display: none;
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
outline: 0;
cursor: pointer;
}
nav span:first-of-type {
border: solid rgb(100, 100, 100);
border-width: 2px 0;
padding: 4px 0;
height: 2px;
background-color: rgb(100, 100, 100);
background-clip: content-box;
z-index: 2;
}
nav span:nth-of-type(2) {
z-index: 1;
background-color: transparent;
}
nav li {
float: left;
font: normal 14px/3 Sans-Serif;
}
nav li:first-of-type {
margin-left: 10px;
}
nav li a {
display: inline-block;
padding: 0 10px;
}
nav li a:hover {
background-color: rgb(220, 220, 220);
}
#media screen and (max-width: 360px) {
nav .menuWrapper {
position: absolute;
top: 100%;
width: 100%;
left: -1px;
overflow: hidden;
border: 0px solid rgb(200, 200, 200);
}
nav ul {
transform: translateY(-100%);
background-color: rgb(235, 235, 235);
}
nav {
border-radius: 0;
}
nav li {
float: none;
}
nav li:first-of-type {
margin-left: 0;
}
nav li a {
display: block;
}
nav span {
display: block;
}
nav span:first-of-type:focus {
border-color: green;
background-color: green;
z-index: 0;
}
nav span:first-of-type:focus ~ .menuWrapper {
border-width: 1px;
}
nav span:first-of-type:focus ~ .menuWrapper > ul,
nav span:first-of-type:not(:focus) ~ .menuWrapper > ul:hover {
transform: translateY(0%);
}
}