CSS background on text issue - html

Question

I'm creating a horizontal menu with an effect on user hover. When the user hovers over a link it would create a red background that is a bit bigger than the menu banner itself.
I have this to illustrate my point: http://jsfiddle.net/65466g17/
I tried using padding and a margin, but no avail. Is there some other alternative for this scenario?
HTML:
<div id="menu-outer">
<div id="menu">
<ul id="horizontal-list">
<li>ABOUT</li>
<li>PRODUCTS</li>
<li>MONITORING</li>
<li><div id="imgBox"></div></li>
<li>TESTIMONIALS</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</div>
</div>
CSS
#menu-outer {
background-color: rgba(0,0,255,0.6);
z-index:100;
position:absolute;
top:80px;
width:100%;
min-width: 1200px;
max-height: 60px;
}
#menu {
display: flex;
align-content: center;
justify-content: center;
font-family: "Menu Font", "Info Box",Verdana;
font-weight: 800;
font-size:medium;
}
ul#horizontal-list {
list-style: none;
padding:0;
}
ul#horizontal-list li {
display: inline-block;
}
#menu a{
text-decoration:none;
float:left;
color:black;
padding:2px 15px;
white-space:nowrap;
}
#menu a:hover{
color:#fff;
background:red;
padding:30px 5px;
margin-top: -28px;
}

Answer 1

As can be seen, increasing the height or adding padding/margin to the hovered link may affect the layout.
Instead, we can use ::before/::after pseudo-elements to achieve the desired effect. It can be done by positioning the pseudo-element absolutely and playing with top/right/bottom/left offsets as follows:
#menu a {
text-decoration:none;
float:left;
color:black;
padding:1em;
white-space:nowrap;
position: relative;
}
#menu a:hover {
color: #fff;
}
#menu a:hover:before {
content: "";
position: absolute;
top: -.5em;
bottom: -.5em;
left: 0;
right: 0;
background:red;
z-index: -1;
}
Note that in this case, a elements MUST have a position of relative (anything other than static) to establish a containing block for absolutely positioned pseudo-elements.
Also, adding z-index: -1 to our pseudo-elements make them appear behind the contents of the links.
#menu-outer {
background-color: rgba(0,0,255,0.6);
z-index:100;
position:absolute;
top:80px;
width:100%;
min-width: 1200px;
max-height: 60px;
}
#menu {
display: flex;
align-content: center;
justify-content: center;
font-family: "Menu Font", "Info Box",Verdana;
font-weight: 800;
font-size:medium;
}
ul#horizontal-list {
list-style: none;
padding: 0;
margin: 0;
}
ul#horizontal-list li {
display: inline-block;
}
#menu a{
text-decoration:none;
float:left;
color:black;
padding:1em;
white-space:nowrap;
position: relative;
}
#menu a:hover {
color: #fff;
}
#menu a:hover:before{
content: "";
position: absolute;
top: -.5em;
bottom: -.5em;
left: 0;
right: 0;
background:red;
z-index: -1;
}
<div id="menu-outer">
<div id="menu">
<ul id="horizontal-list">
<li>ABOUT</li>
<li>PRODUCTS</li>
<li>MONITORING</li>
<li><div id="imgBox"></div></li>
<li>TESTIMONIALS</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</div>
</div>

Answer 2

I fixed your fiddle giving an absolute positioning to #menu a:hover,
take a look http://jsfiddle.net/maio/65466g17/5/,
position: absolute takes the element out of the document flow so it won't affect any other element

Answer 3

It can be tricky to get negative margins working with lists. How about a nice transform?
#menu a {
text-decoration:none;
color:black;
padding: 20px 15px;
white-space:nowrap;
display: inline-block;
height: 60px;
box-sizing: border-box;
transition: transform 0.3s; /* adjust transform duration here */
}
#menu a:hover {
color:#fff;
background:red;
-webkit-transform: scale(1.2); /* adjust transform size here */
-ms-transform: scale(1.2); /* adjust transform size here */
transform: scale(1.2); /* adjust transform size here */
}
Demo