css - 如何创建滚动时透明的导航栏，并删除每个元素之间的空格

Question

我完全不熟悉 CSS，我正在尝试在 Blogger 中制作一个顶部导航栏，它在滚动时是透明的。

这就是我想要得到的:一个顶部固定的导航栏，滚动时略微透明，栏下方有阴影。

见图:http://s27.postimg.org/qgxq63z5f/Screen_Shot_2014_01_08_at_3_51_09_PM.png

然而，在尝试之后，这就是我得到的结果:每个元素之间的差距很大，而且没有任何不透明度。

见图:http://s17.postimg.org/bf8m8jtwv/Screen_Shot_2014_01_08_at_3_28_59_PM.png

我该如何解决这个问题？这是我的代码:

#nav {
z-index: 999; 
position: fixed;
top: 8px;
padding-bottom:10px;
margin-left:0px;
font: 22px Garamond;
list-style-type: none;
width: 1000px;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}
#nav a {
display: inline;
text-decoration: none;
padding: 11px;
margin-right: 10px;
border-bottom: none;
background-color: #ffffff;
color: #000000;
}
#nav a:hover {
background-color:#ffffff;
color: #dddddd;
}
#nav b:scroll {
background: #ffffff;
height: 30px;
width: 1000px;
margin-right: 10px;
margin-left: 10px;
position: relative;
z-index: 9999;
}

Answer 1

你可以使用

    opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */

和阴影(底部阴影)

-webkit-box-shadow: 0px 8px 15px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 8px 15px -7px rgba(0,0,0,0.75);
box-shadow: 0px 8px 15px -7px rgba(0,0,0,0.75);

当然你可以根据你的预期结果调整数字