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:But the result is: I can't fix it...

    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;
    }
    
    0
    followers
    0
    following
    About
    No information