CSS在ul部分没有导航栏透明度

Question

我的导航栏出了问题。它看起来像这样：

这也很好，但我希望透明度在整个导航栏中都是一样的。现在看起来只有没有链接的部分是透明的。

这是我的代码。
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><a href="#">Home</a></li>
				<li><a href="#">Bilder</a></li>
				<li><a href="#">Rezepte</a></li>
				<li><a href="#">Blog</a></li>
			</ul>
			<a href"#" id="pull">Menu</a>
		</nav>

Answer 1

将background-color: transparent;添加到CSS类.nav-collapse ul。这是一个小提琴http://jsfiddle.net/ytyoy6zv/

Answer 2

你去吧。但是您可能希望为这些不同的元素使用不同的类名。

＆＃13;

＆＃13;

.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;
    }

＆＃13;

<nav class="nav-collapse">
    <ul class="nav-collapse">
        <li><a href="#">Home</a></li>
        <li><a href="#">Bilder</a></li>
        <li><a href="#">Rezepte</a></li>
        <li><a href="#">Blog</a></li>
    </ul>
    <a href"#" id="pull">Menu</a>
</nav>

＆＃13;

＆＃13;

＆＃13;