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;
    }
    
    3
    threads
    2
    followers
    About This Board
    Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the langua...
    Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.