CSS issue with a image

advertisements

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'>&nbsp;</div>
  <div class='l p active'>Info
    <a href="<% $URL %><% $_GET[0] %>" class="active b"></a>
  </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?


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'>&nbsp;</div>
  <div class='l p active'>Info
    <a href="<% $URL %><% $_GET[0] %>" class="active b"></a>
  </div>
  <a href="<% $URL %><% $_GET[0] %>/forums">
    <div class='l p'>Forums (105)</div>
  </a>
  <div class='f'></div>
</div>