1. 0

There is an interesting issue i'm facing with. I have a drop-down menu with a arrow on the top of it. I want to change background color of the little triangle while the pointer is on the first list item. What I want to do:

rwp2mbntelucivlzmfvv

But the result is:

nrr45mu5rwgbt4th5s51

I can't fix it even with javascript because of javascript can't manipulate pseudo-elements like :after and :before.

See live: http://jsfiddle.net/j582713e/

HTML:

<ul class="dropdown-menu" role="menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Another item</a></li>
    <li><a href="#">This is a longer item that will not fit properly</a></li>
</ul>

CSS (+Bootstrap):

.dropdown-menu {
  padding:0;
  border-radius:0;
  border:1px solid #e2e2e2;
  margin-top:10px;
}


.dropdown-menu:after {
  content:"";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 12px 8px;
  border-color: transparent transparent #fff transparent;
  position:absolute;
  bottom:100%;
  left:12px;
  z-index:2;
}


.dropdown-menu:before {
  content:"";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 9px 12px 9px;
  border-color: transparent transparent #e2e2e2 transparent;
  position:absolute;
  bottom:100%;
  left:11px;
  z-index:1;
}
1 reply
  1. 1
    Abdul Waahid Darwish
    No title · 5 months ago

    The solution is easy. You should create the triangle by li:first-child:before instead of ul:before. Here is the correct CSS.

    .dropdown-menu > li {
        position:static;
    }
    
    .dropdown-menu > li:first-child:after {
      content:"";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 8px 12px 8px;
      border-color: transparent transparent #fff transparent;
      position:absolute;
      bottom:100%;
      left:12px;
      z-index:2;
    }
     
     
    .dropdown-menu > li:first-child:before {
      content:"";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 9px 12px 9px;
      border-color: transparent transparent #e2e2e2 transparent;
      position:absolute;
      bottom:100%;
      left:11px;
      z-index:1;
    }
    
    .dropdown-menu > li:first-child:hover:after {
        border-color:#f5f5f5;
    }
    

    Demo: http://jsfiddle.net/gye5oh4c/