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;
    }
    
    4
    threads
    5
    followers
    About This Board
    HyperText Markup Language, commonly abbreviated as HTML, is the standard markup language used to create web pages. Along with CSS, and JavaScript, HTML is a cornerstone technology used to create web pages, as well as to create user interfaces for mobile a...
    HyperText Markup Language, commonly abbreviated as HTML, is the standard markup language used to create web pages. Along with CSS, and JavaScript, HTML is a cornerstone technology used to create web pages, as well as to create user interfaces for mobile and web applications. Web browsers can read HTML files and render them into visible or audible web pages.