How to add dropdown menu? - html

Question

I have an existing website with the menu code below and I want to add more stuff to my site but users need to nevigate to those pages please help me to add a sub menu in dropdown to the code I have. Please help?
HTML:
<!-- Header -->
<div id="header">
<div id="nav-wrapper">
<!-- Nav -->
<nav id="nav">
<ul>
<li class="active">Homepage</li>
<li>Left Sidebar</li>
<li>Right Sidebar</li>
<li>No Sidebar</li>
</ul>
</nav>
</div>
</div>
CSS:
#nav {
}
#nav-wrapper {
background: rgba(0,0,0,.1);
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#nav > ul {
margin: 0;
padding: 0;
text-align: center;
}
#nav > ul > li {
display: inline-block;
border-right: 1px solid;
border-color: rgba(255,255,255,.1);
}
#nav > ul > li:last-child {
padding-right: 0;
border-right: none;
}
#nav > ul > li > a, #nav > ul > li > span {
display: inline-block;
padding: 1.5em 1.5em;
letter-spacing: 0.06em;
text-decoration: none;
text-transform: uppercase;
font-size: 1.1em;
outline: 0;
color: #FFF;
}
#nav li.active a {
color: #FFF;
}
#nav > ul > li > ul {
display: none;
}
#nav li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}

Answer 1

Change your css like
#nav li:hover > ul
{
opacity: 1;
display: block;
margin: 0;
position:absolute;
background:green;
}
<nav id="nav">
<ul>
<li class="active">Homepage
<ul>
<li><a href="index.html">Homepage</li>
<li>Pictures</li>
<li>Contact</li>
</ul>
</li>
<li>Pictures</li>
<li>Contact</li>
</ul>
</nav>

Answer 2

CSS :
#nav
{
}
#nav-wrapper
{
background: rgba(0,0,0,.1);
text-align:center;
margin:0;
padding:0;
width: 100%;
}
#nav ul {
display: inline;
margin: 0;
padding: 0;
text-align: center;
padding: 15px 4px 17px 0;
list-style: none;
border-right: 1px solid;
border-color: rgba(255,255,255,.1);
color: white;
}
ul li {
border-right: 1px solid;
border-color: rgba(255,255,255,.1);
display: inline-block;
margin: -4px;
position: relative;
padding: 15px 20px;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
text-align: center;
color: white;
}
ul li:hover {
border-right: 1px solid;
border-color: rgba(255,255,255,.1);
color: white;
}
ul li ul {
position: absolute;
top: 90px;
left: 0;
width: 200px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
border-right: 1px solid;
border-color: rgba(255,255,255,.1);
background: rgba(0,0,0,.1);
display: block;
text-transform: uppercase;
font-size: 1.1em;
outline: 0;
color: #FFF;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
#nav ul li a,
#nav ul li span
{
display: inline-block;
padding: 1.5em 1.5em;
letter-spacing: 0.06em;
text-decoration: none;
text-transform: uppercase;
font-size: 1.1em;
outline: 0;
color: #FFF;
}
#nav li.active a
{
color: #FFF;
}
HTML :
<div id="header">
<div id="nav-wrapper">
<!-- Nav -->
<nav id="nav">
<ul>
<li class="active">Homepage</li>
<li>Pictures
<ul>
<li>test</li>
<li>test2</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</div>
JSFIDDLE DEMO