CSS issue with an image - html

Question

How to make.
.l {
float: left
}
.abs {
position: absolute
}
.rl {
position: relative
}
.r {
float: right
}
.f {
clear: both
}
.menuItem {
border-bottom: 1px #ccc solid
}
.menuItem .p {
padding: 10px 10px;
font-weight: bold;
font-size: 12px
}
.menuItem .active {
color: #333;
cursor: default
}
.menuItem a {
display: block;
text-decoration: none;
cursor: pointer
}
.menuItem .p:hover {
background-color: #f5f5f6;
text-decoration: none
}
<div class='menuItem'>
<div class='l' style='margin-left:120px'> </div>
<div class='l p active'>Info
</div>
<a href="<% $URL %><% $_GET[0] %>/forums">
<div class='l p'>Forums (105)</div>
</a>
<div class='f'></div>
</div>
http://jsfiddle.net/AndyPSV/6gh2dfm4/1/
Image under (center position) .active as such:
(white background, consistent with the border_bottom)
and background: #fff when you hover on ALL active?

Answer 1

An easy solution would be to create a small image of a triangle and to use the background css property on the class .active to position that image in the middle of the bottom. When hovering over the .active you can set the background to none. For example:
.active {
background: url('http://placehold.it/9x9') center bottom no-repeat;
}
.active:hover {
background: none;
}
Another option might be not to use an image at all and to use create a triangle in a :after selector using css.
.l {
float: left
}
.abs {
position: absolute
}
.rl {
position: relative
}
.r {
float: right
}
.f {
clear: both
}
.menuItem {
border-bottom: 1px #ccc solid
}
.menuItem .p {
padding: 10px 10px;
font-weight: bold;
font-size: 12px
}
.menuItem .active {
color: #333;
cursor: default
}
.menuItem a {
display: block;
text-decoration: none;
cursor: pointer
}
.menuItem .p:hover {
background-color: #f5f5f6;
text-decoration: none
}
.active {
background: url('http://placehold.it/9x9') center bottom no-repeat;
}
.active:hover {
background: none;
}
<div class='menuItem'>
<div class='l' style='margin-left:120px'> </div>
<div class='l p active'>Info
</div>
<a href="<% $URL %><% $_GET[0] %>/forums">
<div class='l p'>Forums (105)</div>
</a>
<div class='f'></div>
</div>

Answer 2

you can use :pseudo element for adding triangle at the bottom
.l {
float: left;
position: relative;
}
.abs {
position: absolute
}
.rl {
position: relative
}
.r {
float: right
}
.f {
clear: both
}
.menuItem {
border-bottom: 1px #ccc solid
}
.menuItem .p {
padding: 10px 10px;
font-weight: bold;
font-size: 12px
}
.menuItem .active {
color: #333;
cursor: default
}
.menuItem a {
display: block;
text-decoration: none;
cursor: pointer
}
.menuItem .p:hover {
background-color: #f5f5f6;
text-decoration: none
}
.l.active:after {
content: '';
bottom: -1px;
width: 0;
height: 0;
position: absolute;
border-style: solid;
border-width: 0px 9px 10px 9px;
border-color: rgb(233, 234, 237) transparent;
left: 50%;
margin-left: -11px;
}
.l.active:before {
content: '';
bottom: -1px;
width: 0;
height: 0;
position: absolute;
border-style: solid;
border-width: 0px 10px 11px 10px;
border-color: #ccc transparent;
left: 50%;
margin-left: -12px;
}
<div class='menuItem'>
<div class='l' style='margin-left:120px'> </div>
<div class='l p active'>Info
</div>
<a href="<% $URL %><% $_GET[0] %>/forums">
<div class='l p'>Forums (105)</div>
</a>
<div class='f'></div>
</div>