CSS - Dropdown menu child item drags the whole style one level down - html

Question

I have on main Menu that works totally fine without child menu items.
But now i have to add additional items and wanted to do a drop down Menu.
The Menu item "Services" is parent of "test" there should be a clean line, but when opening "Services" the border of the whole menu expands with "test" there should only be a small border the same length as "Services" surrounding "test".
For this to work i have to edit "current active deeper parent" or "nav-child unstyled small" if i'm correctly.
If possible you should even only need to hover over "Services" to trigger the dropdown menu.
.flowmenu {
background: none repeat scroll 0 0 #333333;
padding-left: 0px;
position: relative;
}
.flowmenu li {
display: inline-block;
list-style: none outside none;
padding: 0;
}
.flowmenu ul li {
position: relative;
}
.flowmenu li > a {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border-color: #000000;
border-style: solid;
border-width: 0 1px 0 0;
box-shadow: 1px 0 0 0 #555555;
margin-bottom: 0;
padding: 5px 15px;
text-transform: uppercase;
color: #FFFFFF;
cursor: pointer;
display: block;
font-family: 'Corbel', sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 30px;
text-decoration: none;
}
.flowmenu li.active {
background: #222222;
}
<div class="navfix">
<ul class="nav menu flowmenu li">
<li class="item-435">Home
</li>
<li class="item-485">Communication
</li>
<li class="item-486 current active deeper parent">Services
<ul class="nav-child unstyled small">
<li class="item-579">Test
</li>
</ul>
</li>
<li class="item-487">Languages
</li>
<li class="item-488">Network
</li>
</ul>
</div>

Answer 1

The parent list item of the <ul> has to be position relative if you want a dropdown menu
the <ul> it self can be position absolute so it appears nicely under the parent. I made a jsFIDDLE
Most important changes:
.flowmenu > li {
position:relative;
display: inline-block;
list-style: none outside none;
padding: 0;
}
.flowmenu ul {
position: absolute;
display:block; /* or none */
width:100%;
background: #222222;
list-style:none;
margin:0;
padding:0;
}
Hope this helps! I didn't completly styled the dropdown maybe it's better to do that yourself
.flowmenu {
background: none repeat scroll 0 0 #333333;
padding-left: 0px;
position: relative;
}
.flowmenu > li {
position: relative;
display: inline-block;
list-style: none outside none;
padding: 0;
}
.flowmenu ul {
position: absolute;
display: none;
width: 100%;
background: #222222;
list-style: none;
margin: 0;
padding: 0;
}
.flowmenu ul > li {
display: block;
}
.flowmenu li > a {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border-color: #000000;
border-style: solid;
border-width: 0 1px 0 0;
box-shadow: 1px 0 0 0 #555555;
margin-bottom: 0;
padding: 5px 15px;
text-transform: uppercase;
color: #FFFFFF;
cursor: pointer;
display: block;
font-family: 'Corbel', sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 30px;
text-decoration: none;
}
.flowmenu > li.active {
background: #222222;
}
.flowmenu > li:hover ul {
display: block;
}
<div class="navfix">
<ul class="nav menu flowmenu li">
<li class="item-435">Home
</li>
<li class="item-485">Communication
</li>
<li class="item-486 current active deeper parent">Services
<ul class="nav-child unstyled small">
<li class="item-579">Test
</li>
</ul>
</li>
<li class="item-487">Languages
</li>
<li class="item-488">Network
</li>
</ul>
</div>