I am working on a new site and wanted to add horitontal menues with dropdowns for the subnav material. It is working but I do have two issues that I can't get right.

I have looked for examples from the web and am using someone elses code in an attempt to figure this out. But it hasn't made any difference. Even though there example works.

First, when the subnavs dropdown they appear translucent. I can see the page content through it.

Second, when I try to hover into the subnav area it dissappears.

Any help would be appreciated. Here is the relavent code.

body {
width: 820px;/* 2*(navigation width) + content padding was 420 was min-width*/
margin-left: auto;
margin-right: auto;
}

#header {
text-align: center;
height: 4em;
}

#container {
padding-left: 100px;/* navigaion width was 200px */
padding-right: 20px;/* content padding */
min-height: 600px;
overflow : hidden;
}

#container .column {
position: relative;
float: left;
}

#content {
width: 100%;
padding: 10px 10px;/* content padding */
}

#navigation {

}

#navigation a {
font-weight: bold;
color: green;
text-decoration: none;
}

#navigation li li a {
display: block;
font-weight: normal;
color: #060;
padding: 0.2em 10px;
}

#navigation li li a:hover {
padding: 0.2em 5px;
border: 5px solid #7d6340;
border-width: 0 5px;
}

#navigation li {
float: left;
position: relative;
width: 10em;
text-align: center;
cursor: default;
background-color: white;
border: 1px solid #7d6340;
border-width: 1px 0;
}

#navigation li ul {
display: none;
position: absolute;
top: 100%;
left: 0;

font-weight: normal;
background: url(images/ddbg3.gif) bottom left no-repeat;
padding: 0.5em 0 1em 0;
border-right: solid 1px #7d6340;
}

li>ul {
top: auto;
left: auto;
}

#navigation li li {
display: block;
float: none;
background-color: transparent;
border: 0;
}

#navigation li:hover ul, li.over ul {
display: block;
z-index: 6000;
}

#footer {
clear: both;
text-align: center;
}

.overPic {
width; 200px;
float: right;
margin: 0;
padding: 1em;

}