CSS Dropdown Menu Issues

Looking for help with dropdown issues.

[ldd15]

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;

}

[londrum]

this bit is probably what is making it appear see-through

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

just change the background-color to white, or whatever.

this bit looks like you are placing the sub-menus directly on top of the old menus

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

you probably need to off-set it a bit. try changing the top and left values.