Inverted triangle for active menu item in a mega menu - html

Question

I want to produce something like the following (note the inverted arrow below "Product":
I want to show an inverted arrow below the active menu item. The mega menu is inside Bootstrap .container.
However with my skills this is what I've been able to accomplish so far. There are two overflowing lines from both sides. I have created these using :before and :after of the arrow element inside the active <li>. Challenge is to make them visible only within the range of .container below
Demo

Answer 1

I didn't see the demo link, but already set up this pure CSS code for you:
<ul>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
</ul>
<div class="content"> </div>
ul {
margin: 0 auto;
width: 90%;
height: 60px;
overflow: hidden;
position: relative;
}
ul li {
float: right;
padding: 5px;
height: 40px;
background: lightblue;
position: relative;
}
ul li:hover:before {
content: ' ';
position: absolute;
right: 50%;
margin-right: 5px;
top: 40px;
width: 10000px;
height: 20px;
background: white;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
}
ul li:hover:after {
content: ' ';
position: absolute;
left: 50%;
margin-left: 5px;
top: 40px;
width: 10000px;
height: 20px;
background: white;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
}
ul:after {
content: ' ';
position: absolute;
top: 40px;
width: 100%;
height: 20px;
background: white;
}
ul:hover:after {
display: none;
}
It creates a 20px space under the menu items. This space is filled by a ul:after element. When hovering the ul, the :after class gets removed. When hovering the menu items, a li:before and li:after are shown, which provide a white background and is skewed, making it look like an arrow.
The only downside with this script is that the default white space (presented by ul:after) is also removed when hovering the ul and not the li. Maybe someone can come up with a fix for that.
JSFiddle

Answer 2

The way you did it is way too complicated. The spaces are due to the height of your pseudo-elements. In this example I deleted your arrows and replace them with CSS triangles, you just need a pseudo element on your open class like this (I let you tweak dimension and position):
.open::after {
content: '';
position: absolute;
left: 50%;
top: 126px;
transform: translate(-50%, 0);
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 5px 0 5px;
border-color: #808080 transparent transparent transparent;
}
Example : http://codepen.io/mbrillaud/pen/ZGOqoa?editors=110

Answer 3

Done the following modifications: RESULT PEN
Added z-index, adjusted margin-top and removed width from :after and :before . The reason you were getting extra white background was because you have given the width as 100vw full viewport which was not needed
.header .menu > li.open.horizontal > span.arrow {
background-image:
url(https://s3.amazonaws.com/imgrvx/white.svg);
background-repeat: no-repeat;
width: 14px;
height: 7px;
left: calc(50% - 14px);
margin-top: 19px;
position: absolute;
z-index:2;
}
.header .menu > li.open.horizontal > span.arrow:before {
content: '';
position: absolute;
height: 7px;
width: 100vw;
background-color: #ffffff;
display: block;
left: -100vw;
border-top: 1px solid #e6e6e6;
}
.header .menu > li.open.horizontal > span.arrow:after {
content: '';
position: absolute;
height: 7px;
left: 14px;
background-color: #ffffff;
border-top: 1px solid #e6e6e6;
}