CSS no navbar transparency in ul section - css

Question

I have a problem with my navbar. It looks like this:
It's allo good, but i want that the transparency is the same all over the whole navbar. Now it looks like that only the parts without the links is transparent.
Here is my code.
HTML:
.nav-collapse {
height: 35px;
position: relative;
width: 100%;
text-align: center;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
background-color: rgba(38, 44, 58, 0.8);
color: rgba(1, 1, 1, 0.8);
*zoom: 1;
}
.nav-collapse ul {
padding: 0;
margin: 0 auto;
width: 400px;
height: 35px;
}
.nav-collapse li {
float: left;
display: inline;
}
.nav-collapse a {
font-family: "lavanderia_regular", Georgia, serif;
font-weight: bold;
display: inline-block;
width: 100px;
cursor: pointer;
font-size: 18px;
color: #a7dbdb;
text-decoration: none;
text-align: center;
line-height: 35px;
}
.nav-collapse a:hover {
color: #69d2e7;
}
.nav-collapse:before, .nav-collapse:after {
content: " ";
display: table;
}
.nav-collapse:after {
clear: both;
}
#pull {
display: none;
}
<nav class="nav-collapse">
<ul class="nav-collapse">
<li>Home</li>
<li>Bilder</li>
<li>Rezepte</li>
<li>Blog</li>
</ul>
<a href"#" id="pull">Menu</a>
</nav>

Answer 1

Add background-color: transparent; to the CSS class .nav-collapse ul. Here is a fiddle http://jsfiddle.net/ytyoy6zv/

Answer 2

Here ya go. But you probably want to use different class names for these different elements.
.nav-collapse {
height: 35px;
position: relative;
width: 100%;
text-align: center;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
background-color: rgba(38, 44, 58, 0.8);
color: rgba(1, 1, 1, 0.8);
*zoom: 1;
}
.nav-collapse ul {
padding: 0;
margin: 0 auto;
width: 400px;
height: 35px;
box-shadow:none; /* since you're reusing the nav-collapse class... override */
background-color:transparent; /* and override background-color too */
}
.nav-collapse li {
float: left;
display: inline;
}
.nav-collapse a {
font-family: "lavanderia_regular", Georgia, serif;
font-weight: bold;
display: inline-block;
width: 100px;
cursor: pointer;
font-size: 18px;
color: #a7dbdb;
text-decoration: none;
text-align: center;
line-height: 35px;
}
.nav-collapse a:hover {
color: #69d2e7;
}
.nav-collapse:before, .nav-collapse:after {
content: " ";
display: table;
}
.nav-collapse:after {
clear: both;
}
#pull {
display: none;
}
<nav class="nav-collapse">
<ul class="nav-collapse">
<li>Home</li>
<li>Bilder</li>
<li>Rezepte</li>
<li>Blog</li>
</ul>
<a href"#" id="pull">Menu</a>
</nav>