我已经根据本教程为我的网页创建了一个菜单栏。
我需要一些帮助来设置正确的 CSS 参数，因为我不再习惯它们了。
我能够在 Dummy Dummy Projekt 上重建教程。但它不适用于我的虚拟项目。
菜单点之间不应有间隙。下拉线不起作用，它应该只显示子菜单，当我悬停或单击菜单点时。
谁能给我一个提示，如何解决这个问题？
CSS 代码：
#header-wrapper {
background-color: #007294;
background-image: -moz-linear-gradient(top, #008dab, #007294);
background-image: -webkit-linear-gradient(top, #008dab, #007294);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008dab), to(#007294));
background-image: -ms-linear-gradient(top, #008dab, #007294);
background-image: -o-linear-gradient(top, #008dab, #007294);
background-image: linear-gradient(top, #008dab, #007294);
}
#header {
position: relative;
margin: 2.5% 0 2.5% 0;
padding: 0 40px 0 40px;
border-radius: 10px;
border: solid 1px #006e8b;
box-shadow: inset 0px 0px 0px 1px #12a0bf, 0px 1px 4px 0px rgba(0,0,0,0.10);
background-color: #007b9d;
background-image: -moz-linear-gradient(top, #008ead, #007b9d);
background-image: -webkit-linear-gradient(top, #008ead, #007b9d);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008ead), to(#007b9d));
background-image: -ms-linear-gradient(top, #008ead, #007b9d);
background-image: -o-linear-gradient(top, #008ead, #007b9d);
background-image: linear-gradient(top, #008ead, #007b9d);
height: 86px;
}
#header h1 {
position: absolute;
left: 40px;
top: 0;
color: #fff;
font-size: 2.4em;
letter-spacing: -2px;
line-height: 86px;
}
#header h1 a {
color: #fff;
text-decoration: none;
}
#header nav li {
float: left;
text-align: center;
list-style-type: none
}
#header nav {
position: absolute;
right: 40px;
top: 1px;
line-height: 84px;
text-transform: lowercase;
font-size: 1.3em;
letter-spacing: -1px;
}
#header nav a {
color: #000;
padding: 0 25px 0 25px;
outline: 0;
text-decoration: none;
}
#header nav a.current-page-item {
background-color: #007897;
background-image: -moz-linear-gradient(top, #007b99, #007897);
background-image: -webkit-linear-gradient(top, #007b99, #007897);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#007b99), to(#007897));
background-image: -ms-linear-gradient(top, #007b99, #007897);
background-image: -o-linear-gradient(top, #007b99, #007897);
background-image: linear-gradient(top, #007b99, #007897);
box-shadow: inset 0px 1px 5px 1px rgba(0,0,0,0.1), 0px 0px 5px 1px rgba(255,255,255,0.1);
}
#header nav a:hover {
background-color: #0882a1;
background-image: -moz-linear-gradient(top, #0782a0, #077d9b);
background-image: -webkit-linear-gradient(top, #0782a0, #077d9b);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0782a0), to(#077d9b));
background-image: -ms-linear-gradient(top, #0782a0, #077d9b);
background-image: -o-linear-gradient(top, #0782a0, #077d9b);
background-image: linear-gradient(top, #0782a0, #077d9b);
box-shadow: inset 0px 1px 5px 1px rgba(0,0,0,0.05), 0px 0px 5px 1px rgba(255,255,255,0.05);
}
#nav test current ul {
left: 0;
}
#nav test ul {
position: absolute;
left: -999em;
width: 408px;
list-style: none;
padding: .9em 0 0;
list-style-type: none;
}
#nav test ul li {
width: auto;
margin: 0 15px 0 0;
}
#nav test ul a {
font-size: 80%;
height: auto;
padding: 0 8px;
}
#nav test li:active ul, #nav test li:hover ul {
left: 0;
position: static;
background: #fff;
}
HTML 代码：
<div class="container">
<div class="row">
<div class="12u">
<header id="header">
<h1><a href="#" id="logo">Dummy</a></h1>
<nav id ="nav">
<ul id="test">
<li class="current"><a href="#">Link1</a>
<ul>
<li><a href="#">Sub1</a></li>
<li><a href="#">Sub1</a></li>
<li><a href="#">Sub1</a></li>
</ul>
</li>
<li><a href="#">Link2</a>
<ul>
<li><a href="#">Sub2</a></li>
<li><a href="#">Sub2</a></li>
<li><a href="#">Sub2</a></li>
</ul>
</li>
<li><a href="#">Link3</a>
<ul>
<li><a href="#">Sub3</a></li>
<li><a href="#">Sub3</a></li>
<li><a href="#">Sub3</a></li>
</ul>
</li>
</ul>
</nav>
</header>
</div>
</div>
</div>