CSS dropdown menu vertical - html

Question

I'm trying to make a vertical dropdown menu but doesn't seem to work. It currently doesn't display any text, just a bar going across the top of the page. It is being pushed to be by by 115px for due to requirements. Here's the HTML:
<div id="wrapper">
<h1>Flags </h1>
<nav>
<ul>
<li>Introduction</li>
<li>History</li>
<li>National Flags</li>
<li>International Maritime Signal Flags
<ul>
<li>Maritime Signals: Letters</li>
<li>Maritime Signals: Numbers</li>
</ul>
</li>
</ul>
</nav>
Here is the CSS:
nav {
height:30px;
}
nav ul {
background-color: #5d2c2c;
padding: 0;
list-style: none;
position: relative;
bottom: 115px;
display: block;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: right;
bottom: 115px;
position: relative;
}
nav ul li a {
display: block; padding: 5px 5px;
color: #FFF; text-decoration: none;
text-align:right;
}
nav ul ul {
background: #5d2c2c; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #000;
border-bottom: 1px solid #575f6a;
position: relative;
}

Answer 1

The CSS needed a little work on
Try this FIDDLE it'll work
This was missing:
nav ul li:nth-child(4) ul { display:none; }
nav ul li:nth-child(4):hover ul { display:block; color:red; }
and bottom was removed from this one
nav ul li {
float: left;
position: relative;
}

Answer 2

I found this link the other day, it's an step by step guide with full examples, check it out: http://www.adam-bray.com/blog/91/Easy+HTML+5+%26+CSS+3+Navigation+Menu/

Answer 3

check this fiddle , a similar implementation
<nav>
<ul>
<li class="header">
People
<ul class="content">
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
<li class="header">
Animals
<ul class="content">
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
</ul>
</nav>
nav > ul{}
nav > ul > li{float:left;margin:0 5px;background:#cc3333;}
.header li a{background:#eee;color:#cc3333;}
.header li a:hover{color:#fff;background:#cc3333;}
ul{padding:0;}
li{list-style-type:none;}
a{color:#fff;text-decoration:none;padding:5px;display:block;text-align:center;}
.content{
display:none;
}
.header:hover > .content{display:block;}