Css Drop Line Menu Bar Issues - html

Question

I've created a Menubar based on this Tutorial for my webpage.
I'd need some help at setting the right CSS Parameters, since I am not used to them anymore.
I was able to reconstruct the tutorial on a Dummy Dummy Projekt. But it isn't working for my Dummy Project.
There shouldn't be a gap between the Menu points. The drop line isn't working, it should only show the submenus, when I hover or click the menu point.
Can anyone give me a hint, how to fix this up?
JSFIDDLE
CSS code:
#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 code:
<div class="container">
<div class="row">
<div class="12u">
<header id="header">
<h1>Dummy</h1>
<nav id ="nav">
<ul id="test">
<li class="current">Link1
<ul>
<li>Sub1</li>
<li>Sub1</li>
<li>Sub1</li>
</ul>
</li>
<li>Link2
<ul>
<li>Sub2</li>
<li>Sub2</li>
<li>Sub2</li>
</ul>
</li>
<li>Link3
<ul>
<li>Sub3</li>
<li>Sub3</li>
<li>Sub3</li>
</ul>
</li>
</ul>
</nav>
</header>
</div>
</div>
</div>

Answer 1

Like this
DEMO
CSS
* {
margin:0;
padding:0;
}
body {
font-family:"Times New Roman", Times, serif;
font-size:100%;
}
#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;
}
#nav {
list-style:none;
font-weight:bold;
height:4.1em;
margin:75px auto 0;
width:816px;
position:relative;
line-height:1.4em;
}
#nav li {
width:136px;
float:left;
text-align:center;
}
#nav a {
height:1.5em;
display:block;
text-decoration:none;
color:#000;
outline:0;
}
#nav a.last {
border-right-width:1px;
}
#nav a:active, #nav a:focus, #nav a:hover {
color:#000;
}
#nav li.current a {
}
/* --------- Sub Nav --------- */
#nav li.current ul a {
}
#nav li.current ul {
left:0;
}
#nav ul {
position:absolute;
left:-999em;
width:816px;
list-style:none;
padding:.9em 0 0;
}
#nav ul li {
width:auto;
margin:0 15px 0 0;
}
#nav ul a {
font-size:80%;
height:auto;
padding:0 8px;
color:#999;
}
#nav ul a:active, #nav ul a:focus, #nav ul a:hover {
color:#000;
border-color:#000;
}
#nav li:active ul, #nav li:hover ul {
left:0;
background:#fff;
}
#nav ul li.subcurrent a {
color:#000;
border-color:#000;
}