css drop down menu is only showing last list item - html

Question

My drop down menu is only showing the last drop down items. I know my css has something wrong with it, but I cannot figure it out. Can someone please help? Thanks in advance.
Here is the HTML:
<div class="menuBar">
<nav class="Menu">
<ul class="main">
<li>Home</li>
<li>Weddings
<ul>
<li>Gallery</li>
<li>Testimonials</li>
</ul>
</li>
<li>Restaurant
<ul>
<li>Gallery</li>
</ul>
</li>
<li>Special Occasions</li>
<li>Corporate</li>
<li>Upcoming Events</li>
<li>Contact Us</li>
<li>Our Locations</li>
</ul>
</nav>
</div>
Here is the CSS:
nav.Menu {
text-align: center;
margin-top: 14px;
}
nav.Menu .main li {
display: inline-block;
margin-right: -4px;
position: relative;
padding: 5px 20px;
cursor: pointer;
}
nav.Menu .main li ul li {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
}
nav.Menu .main li ul li {
background: #83562c;
display: block;
color: #fff;
margin-top: -2px;
z-index: 1000 !important;
}
nav.Menu .main li:hover ul li {
background: #83562c;
}
nav.Menu .main li:hover ul li {
display: block;
opacity: 1;
visibility: visible;
z-index:99;
}
nav.Menu a {
color: #fff;
font: bold 13px/42px Arial, Helvetica, sans-serif;
padding: 0 10px;
text-align: center;
}
nav.Menu a:hover {
color: #eacc90;
}

Answer 1

Huangism is right, your use of position:absolute is breaking the dropdown. I've rewritten your CSS in the following JSFiddle, but it's still hackish.
I'd recommend doing some reading on dropdown menus:
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
http://cssdeck.com/labs/another-simple-css3-dropdown-menu

Answer 2

drove me to desparation but with a little trickery position:absolute does work http://jsfiddle.net/z509cjmg/3/. Adapted from here: http://cssdeck.com/labs/multi-level-dropdown-menu
.navmenu ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 1s ease;
margin-left: 142px;
margin-top: -30px;
}