Horizontal main menu with bootstrap and joomla - css

Question

I want to create a horizontal main menu for joomla with bootstrap.
The content is being loaded dynamically by joomla. The styling is done via bootstrap and which overrides it in a separate css file.
It needs to collapse properly for smartphones.
Everything should be done without jquery, if possible.
Task 1
The menu needs to display the submenu items in a horizontal line, the beginning of the main menu, on the left side.
It should be displayed on hover over the parent item. I also added a hover on the submenu itself, so that it stays open if you hover over the submenu items.
But the submenu needs to be replaced if you hover over another parent item.
Task 2
On hover over the parent items, the backgorund needs to display a certain color, so that you can see where are you hovering.
Below the box there needs to be a little triangle in the same color.
Problems
The triangle is not being displayed on all the items.
The box with the parent item shifts the text to the left, since it is adding some space, because of the triangle. The triangle is being added with :hover:after and content: ''.
I got the triangle and the box working, if I change the position of the items to relative. But then the sub-menu is being displayed relative to the parent item and not at the beginning of the menu.
How can I fix that? Is there a way to make the box and the triangle relative and the sub-menu absolute to the menu?
Here is the code on codeply.
Preview
Code
HTML:
<div class="col-xs-15 col-sm-9 col-md-12 mainmenu">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"></button>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbar">
<!-- class="nav-collapse collapse" -->
<!-- begin joomla insert main menu -->
<ul class="nav navbar-nav">
<li class="item-101">
Home
</li>
<li class="item-116 deeper parent"><span class="nav-header">Item 1</span>
<ul class="submenu">
<li class="item-151">
SubItem 1
</li>
<li class="item-103">
SubItem 2
</li>
</ul>
</li>
<li class="item-117 deeper parent"><span class="nav-header">Item2</span>
<ul class="submenu">
<li class="item-254 divider">
<span class="separator">SubItem 1</span>
</li>
</ul>
</li>
<li class="item-118"><span class="nav-header">Item 3</span></li>
<li class="item-119 deeper parent"><span class="nav-header">Item 4</span>
<ul class="submenu">
<li class="item-158">
SubItem 1
</li>
<li class="item-169">
SubItem 2
</li>
</ul>
</li>
<li class="item-120">
Item 5
</li>
<li class="item-121"><span class="nav-header">Item 6</span></li>
<li class="item-157">
Item 7
</li>
</ul>
<!-- end joomla insert main menu -->
</div>
</div>
</nav>
</div>
</div>
CSS:
.navbar.navbar-default{
padding-left: 0px;
padding-right: 0px;
margin: 0px;
z-index: 1;
position: absolute;
}
.navbar.navbar-default > div.container-fluid {
/* remove padding */
padding-left: 0px;
padding-right: 0px;
margin: 0px;
}
.mainmenu {
/* remove padding */
padding-left: 0px;
padding-right: 0px;
margin: 0px;
}
ul.nav.navbar-nav {
font-size: 15px;
text-transform: uppercase;
margin-top: 0px;
margin-left: 0px;
}
.submenu {
padding: 0px;
z-index: 1000;
left: 0px;
display: none;
right: 0px;
float: left;
position: absolute;
margin: 0px;
width: 100%;
}
.submenu > li {
list-style: none;
margin: 4px;
margin-right: 4px;
padding: 0px;
white-space: nowrap;
left: 0px;
right: 0px;
float: left !important;
position: relative;
top: 4px;
text-transform: none;
overflow: hidden;
color: #41291c;
}
.submenu > li:first-child {
margin-left: 0px;
padding-left: 0px;
}
.submenu > li:last-child {
margin-right: 0px;
}
.submenu > li > a {
margin: 0px;
color: #41291C;
}
.submenu > li > a:hover {
text-decoration: none;
color: #41291c;
}
.submenu > li > span {
list-style: none;
margin: 0px;
padding: 0px;
}
.nav.navbar-nav > li {
padding-top: 8px;
padding-left: 11px;
padding-right: 11px;
padding-bottom: 4px;
position: static !important;
height: 29px !important;
white-space: nowrap;
float: left;
display: inline-block;
}
.nav.navbar-nav > li:first-child {
padding-left: 0px;
}
.nav.navbar-nav > li:hover {
background-color: #ded6ad;
}
.nav.navbar-nav > li:hover > .submenu {
/* let the menu appear on hover */
display: block;
}
.nav.navbar-nav > li.active > a{
color: #00aad2;
}
.nav.navbar-nav > li > a {
/* including submenus */
font-size: 15px;
text-transform: uppercase;
margin-top: 0px;
padding: 0px;
color: #222;
}
.nav.navbar-nav > li.active > a {
/* current active */
font-size: 15px;
text-transform: uppercase;
background-color: #ffffff;
color: #00aad2;
}
.nav.navbar-nav > li.active > a:hover {
/* current active on hover*/
background-color: #ffffff;
color: #00aad2;
}
.nav-header{
font-size: 15px;
text-transform: uppercase;
line-height: 17px;
box-sizing: border-box;
cursor: pointer;
}
.nav-header:hover > ul.submenu {
display: block !important;
}
.submenu:hover{
display: block;
}
.nav.navbar-nav > li:hover:after {
/* adds the triangle */
z-index: -1;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 3px 0 3px;
border-color: #ded6ad transparent transparent transparent;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
position: relative;
float: left;
margin: 0px !important;
margin-right: -26px;
padding: 0px !important;
box-sizing: border-box;
display: block;
content: "";
}