Submenu, set position more left - html

Question

i've a small problem with my slide menu. The slide is fadin in from down to up. This also is working fine.
But now I want to set the position a bit more to the left side, so that i get a line with the main menu.
Maybe someone can help me. This is my sample...
This is my code... [Menu][1] https://jsfiddle.net/Tabes/eb52suo1/15/

Answer 1

Here is your solution
.flex-box {
width: 100%;
min-height: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
align-content: flex-start;
}
.navigation {
background-image: linear-gradient(#444, #111);
background-color: #111;
width: 100%;
}
/* ******************************************************************************************* */
/* ***** Main Navigation - Main Level ******************************************************* */
/* ******************************************************************************************* */
.nav_main {
background: transparent;
list-style: none;
}
.nav_main ul:before,
.nav_main ul:after {
content: "";
display: table;
}
.nav_main ul {
list-style: none outside none;
position: relative;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
align-content: center;
margin: 0px;
padding: 0px;
min-width: auto;
min-height: auto;
zoom: 1;
}
.nav_main ul li:before,
.nav_main ul li:after {
content: "";
display: inline;
}
.nav_main ul li.icon:before,
.nav_main ul li.icon:after {
display: inline-block;
margin: 2px 15px 0px 0px;
width: 15px;
height: 15px;
}
.nav_main ul li.icon:before {
background: url("../pic/icons/glyphicons-387-log-in.png") no-repeat top right;
background-size: 15px;
float: left;
margin: 2px 15px 0px 0px;
}
.nav_main ul li.icon:after {
background: url("../pic/icons/glyphicons-415-disk-save.png") no-repeat top left;
background-size: 15px;
float: right;
margin: 2px 0px 0px 15px;
}
.nav_main ul li>img.before,
.nav_main ul li>img.after {
display: inline-block;
margin: 2px 15px 0px 0px;
width: 15px;
height: auto;
}
.nav_main ul li>img.before {
float: left;
margin: 2px 15px 0px 0px;
}
.nav_main ul li>img.after {
float: right;
margin: 2px 0px 0px 15px;
}
.nav_main ul li:last-child {
border-right: none;
box-shadow: none;
}
.nav_main ul li:hover {
background: #444;
display: inline-block;
margin: 0px;
padding: 10px 35px;
min-width: auto;
min-height: auto;
}
.nav_main ul li {
border-right: 1px solid #222;
box-shadow: 1px 0 0 #444;
cursor: pointer;
text-align: center;
display: inline-block;
flex: 0 0 auto;
position: relative;
margin: 0px;
padding: 10px 35px;
min-width: auto;
min-height: auto;
}
.nav_main ul li>a:hover {
color: #fafafa;
}
.nav_main ul li>a {
font: bold 12px Arial, Helvetica;
text-transform: uppercase;
text-decoration: none;
text-shadow: 0 1px 0 #000;
color: #999;
}
.nav_main ul li:hover>ul {
visibility: visible;
opacity: 1;
margin: 0;
}
/* ******************************************************************************************* */
/* ***** Main Navigation - Level #1 ******************************************************** */
/* ******************************************************************************************* */
.nav_main ul ul {
list-style: none outside none;
position: absolute;
background: #444;
box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
border-radius: 3px;
flex-direction: column;
align-items: flex-start;
visibility: hidden;
opacity: 0;
top: 40px;
left: 0;
z-index: 5;
transition: all 0.2s ease-in-out;
margin: 10px 0px 0px 0px;
padding: 0px;
min-width: 185px;
min-height: 35px;
width: auto;
}
.nav_main ul ul li:before,
.nav_main ul ul li:after {
content: "";
display: inline;
}
.nav_main ul ul li.icon:before,
.nav_main ul ul li.icon:after {
display: inline-block;
margin: 4px 35px 0px 0px;
width: 15px;
height: 15px;
}
.nav_main ul ul li.icon:before {
background: url("../pic/icons/glyphicons-387-log-in.png") no-repeat top right;
background-size: 15px;
float: left;
margin: 4px 35px 0px 0px;
}
.nav_main ul ul li.icon:after {
background: url("../pic/icons/glyphicons-415-disk-save.png") no-repeat top left;
background-size: 15px;
float: right;
margin: 4px 0px 0px 35px;
}
.nav_main ul ul li>img.before,
.nav_main ul ul li>img.after {
display: inline-block;
margin: 4px 35px 0px 0px;
width: 15px;
height: auto;
}
.nav_main ul ul li>img.before {
float: left;
margin: 4px 35px 0px 0px;
}
.nav_main ul ul li>img.after {
float: right;
margin: 4px 0px 0px 35px;
}
.nav_main ul ul li:hover {
background: #444;
background-image: linear-gradient(#04acec, #0186ba);
background-color: #0186ba;
display: inline-block;
margin: 0px;
padding: 5px 15px;
min-width: 185px;
min-height: 35px;
}
.nav_main ul ul li:first-child:hover {
border-radius: 3px 3px 0px 0px;
}
.nav_main ul ul li:last-child:hover {
border-radius: 0px 0px 3px 3px;
}
.nav_main ul ul li {
border: none;
box-shadow: none;
text-align: left;
display: inline-block;
flex: 0 0 auto;
margin: 0px;
padding: 5px 15px;
min-width: 185px;
min-height: 35px;
}
.nav_main ul ul li>a:hover {
color: #fafafa;
}
.nav_main ul ul li>a {
font: bold 12px Arial, Helvetica;
text-transform: uppercase;
text-decoration: none;
text-shadow: 0 1px 0 #000;
color: #999;
}
.nav_main ul ul li:hover>ul {
visibility: visible;
opacity: 1;
margin: 0;
}
<!-- Main Navigation (Container for JavaScript Function)-->
<div id="Navigation" class="navigation">
<!-- ### Main Navigation Link Liste ### -->
<nav id="Nav_Main" class="nav_main">
<ul class="flex-box">
<li>
Home
<ul class="flex-box">
<li>
Referenzen
</li>
<li>
Downloads
</li>
<li>
Partner Programm
</li>
<li>
Existenzgründer
</li>
<li>
<!-- Philosophie -->
Philosophie
</li>
</ul>
</li>
<li>
Hosting
<ul class="flex-box">
<li>
Web Hosting
</li>
<li>
TYPO3
</li>
<li>
WordPress
</li>
<li>
Magento
</li>
<li>
PrestaShop
</li>
</ul>
</li>
<li>
<a class="ajaxy" href="webdesign.html">WebDesign</a>
</li>
</ul>
</nav>
<!-- ### Main Navigation Link Liste End ### -->
</div>
<!-- Main Navigation Container End -->

Answer 2

Inside your flex-box class you can add a margin-left: -35px; and it will fix the position of the sub menu according to the snippet. You should mention though, that this might cause problems for the responsive part of your site.