Making a Drop-Down menu - html

Question

I'm trying to make a responsive menu without using bootstrap but i just can't make it
<ul class="nav">
<li class="active">Border</li>
<li>Gradient</li>
<li>Transform</li>
<li>Animations</li>
<li>Transition</li>
<li>Text Shadow</li>
<li>Box Shadow</li>
<li>Font-Face</li>
<li>RGBA</li>
</ul>
So this is the menu and on a specific viewport width it shoud become a drop down. Can you help me?

Answer 1

I have done my best to use javascript as less as possible and to fit to your markups. Hope it will help you!
document.querySelector(".nav").addEventListener("click", function(evt) {
console.log("nav");
if (!this.classList.contains("open")) {
this.classList.add("open");
this.classList.remove("closed");
} else {
this.classList.remove("open");
this.classList.add("closed");
}
evt.stopPropagation();
});
document.querySelector("body").addEventListener("click", function() {
var nav = document.querySelector(".nav");
if (!nav.classList.contains("open")) {
nav.classList.add("open");
nav.classList.remove("closed");
} else {
nav.classList.remove("open");
nav.classList.add("closed");
}
});
var li_elements = document.querySelectorAll(".nav li");
console.log(li_elements);
[].forEach.call(li_elements, function(li_element) {
li_element.addEventListener("click", function() {
console.log("remove actove");
document.querySelector(".nav li.active").classList.remove("active");
this.classList.add("active");
});
});
document.querySelector(".nav li.active").addEventListener("click", function(evt) {
evt.preventDefault();
});
.nav {
border: solid 1px #aaa;
background-image: linear-gradient(to bottom, #ddd, #eee);
height: 1.5em;
font-size: 1em;
padding: 0.10em 0.5em;
cursor: pointer;
width: 200px;
}
.nav.closed li.active:before {
content: "";
float: right;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #999;
margin-top: 10px
}
.nav li {
display: none;
}
.nav.open {
height: auto;
background: white;
}
.nav li {
border-bottom: solid 1px #ddd;
padding: 0;
margin: 0
}
.nav li a {
text-decoration: none;
color: #666;
display: block;
margin: 0;
padding: 0.25em;
}
.nav.open li {
display: block;
}
.nav.open li:hover {
background: #eee;
}
.nav.closed li.active {
display: block;
color: white;
border:none;
}
<ul class="nav closed">
<li class="active">Border
</li>
<li>Gradient
</li>
<li>Transform
</li>
<li>Animations
</li>
<li>Transition
</li>
<li>Text Shadow
</li>
<li>Box Shadow
</li>
<li>Font-Face
</li>
<li>RGBA
</li>
</ul>