Vertical Drop Down Menu - css

Question

I am trying to create a drop down menu similar to the one found on this website http://yachtbelleaimee.com/
I have created the drop down menu however I do not know how to position the lists like that found in the website. And like the website I would also like to known how to position the list below the header. Thank you very much for any help you can provide
/* NAVIGATION START */
nav {
display: block;
width: 960px;
margin: 100px auto;
text-align: center;
}
nav select {
display: none;
}
#menu {
width: 608px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#menu ul {
margin: 0px;
padding: 0px;
}
#menu ul li {
background-color: #666;
float: left;
border: 1px solid #CCC;
position: relative;
list-style-type: none;
}
#menu ul li:hover ul {
visibility: visible;
background-color: #333;
}
#menu ul li a {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 30px;
color: #FFF;
text-decoration: none;
text-align: center;
display: block;
height: 30px;
width: 150px;
}
#menu ul ul {
position: absolute;
visibility: hidden;
left: -1px;
top: 31px;
}
#menu ul li:hover {
background-color: #333;
}
#menu ul li ul li a:hover {
background-color: #069;
}
#menu ul li a:hover {
color: #0FF;
}
#leftmenu {
position: absolute;
left: 165px;
top: 20px;
}
#rightmenu {
position: absolute;
right: 164px;
top: 20px;
}
/* NAVIGATION END */
<nav>
<div id="menu">
<ul id='leftmenu'>
<li>BOAT
<ul>
<li><a href='#'>Specs & Boat Plans</a></li>
<li><a href='#'>Itineraries</a></li>
<li><a href='#'>Exteriors</a></li>
<li><a href='#'>Diving & Water Toys</a></li>
</ul>
</li>
</ul>
<ul id='rightmenu'>
<li>LIFE ON BOARD
<ul>
<li><a href='#'>Itineraries</a></li>
<li><a href='#'>Dining</a></li>
<li><a href='#'>Family Fun</a></li>
<li>Lifelong Learning</li>
<li>The Crew</li>
</ul>
</li>
</ul>
</div>
</nav>

Answer 1

Here's some CSS to get you started:
/* NAVIGATION START */
nav {
display: block;
width: 960px;
margin: 100px auto;
text-align: center;
}
nav select {
display: none;
}
#menu {
width: 608px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#menu ul {
margin: 0px;
padding: 0px;
}
#menu ul li {
background-color: #666;
float: left;
border: 1px solid #CCC;
position: relative;
list-style-type: none;
}
#menu ul li:hover ul {
visibility: visible;
}
#menu ul li a {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 30px;
color: #FFF;
text-decoration: none;
text-align: center;
display: block;
height: 30px;
width: 150px;
}
#menu ul ul {
position: absolute;
visibility: hidden;
left: -1px;
top: 31px;
}
#menu ul li:hover {
background-color: #333;
}
#menu ul li ul li a:hover {
background-color: #069;
}
#menu ul li a:hover {
color: #0FF;
}
#leftmenu {
position: absolute;
left: 165px;
top: 20px;
}
#leftmenu li>ul>li {
margin:1em 0;
}
#leftmenu li:nth-child(2) {
margin-left:20px;
}
#leftmenu li:nth-child(3) {
margin-left:40px;
}
#leftmenu li:nth-child(4) {
margin-left:60px;
}
#rightmenu {
position: absolute;
right: 164px;
top: 20px;
}
#rightmenu li>ul>li {
margin:1em 0;
}
#rightmenu li:nth-child(2) {
margin-left:-20px;
}
#rightmenu li:nth-child(3) {
margin-left:-40px;
}
#rightmenu li:nth-child(4) {
margin-left:-60px;
}
#rightmenu li:nth-child(5) {
margin-left:-80px;
}
And a JSFiddle.

Answer 2

You can simplify
#menu {
width: 608px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
to
#menu {
width: 608px;
margin: 0px auto;
padding: 0px;
}
For that... er... cascading effect, you'll probably have to use something like
<li style="padding-left: some value here">
and decrease it with each <li> (since you're floating them right). Also, the menu will have to be as wide as the space that goes from the leftmost menu item to the rightmost; it cannot be as wide as one menu item.