title: I want arrow icon in my drop down child items and change the background colour of my tabs
body: <p><a href="https://i.stack.imgur.com/MY8T8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MY8T8.jpg" alt="this is the problem"></a>
  Please tell me the simple method
  I want to add pause/play icon in all my parent child of drop down menu.
  Also how can I change my tabs background colour?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#nav {
       float: left;
      font: 14px calibri, Helvetica, Sans-serif;
       border: 1px solid #121314;
       border-top: 1px solid #2b2e30;
       -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
       border-radius: 5px;
       overflow:visible;
    line-height:7px;
  }
  
  #nav ul {
   margin:0;
   padding:0;
   list-style:none;
  }
  
  #nav ul li {
   float:left;
  }
  
  #nav ul li a {
      float: left;
   color:#d4d4d4;
       padding: 8px 20px;  /* change the height of whole menu*/
   text-decoration:none;
       background:#3C4042;
    background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
   background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
   background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
   border-left: 1px solid rgba(255, 255, 255, 0.05);
          border-right: 1px solid rgba(0,0,0,0.2);
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
   
  }
  
  #nav ul li a:hover,
  #nav ul li:hover &gt; a {
       color:#FFF;   /* change tabs font hover color */
       background:#3C4042;
   background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
   background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
   background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
       text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
  
  }
  
  #nav li ul a:hover, 
  #nav ul li li:hover &gt; a  {
      color:#FFF;        /*  change the drop down font color*/
     background: #5C9ACD;
   background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
   background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
   background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
       border-bottom: 1px solid rgba(0,0,0,0.6);
       border-top: 1px solid #7BAED9;
       text-shadow: 0 1px rgba(255, 255, 255, 0.3);
  }
  
  
  
  #nav li ul {
   overflow:visible;
       background:#3C4042;
       background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
       background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
       background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
       border-radius: 0 0 10px 10px;
       -moz-border-radius: 0 0 10px 10px;
       -webkit-border-radius: 0 0 10px 10px;
       left: -999em;
       margin: 32px 0 0;        /* change the position of drop down menu, up and down.*/
       position: absolute;
       width: 160px;
       z-index: 9999;
       box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
       -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
       -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
       border: 1px solid rgba(0, 0, 0, 0.5);
  }
  
  #nav li:hover ul {
       left: auto;
  }
  
  #nav li ul a {
       background: none;
       border: 0 none;
       margin-right: 0;
       width: 120px;
       box-shadow: none;
       -moz-box-shadow: none;
       -webkit-box-shadow: none;
       border-bottom: 1px solid transparent;
       border-top: 1px solid transparent;
  }
  
  #nav li li ul {
       margin: -1px 0 0 160px;
       -webkit-border-radius: 0 10px 10px 10px;
       -moz-border-radius: 0 10px 10px 10px;
       border-radius: 0 10px 10px 10px;
       visibility:hidden;
  }
  
  #nav li li:hover &gt; ul {
      visibility: visible;
  }
  #nav li:hover &gt; ul {
      left: auto;
  }
  
  
  
  
  
  #nav ul ul li:last-child &gt; a {
   -moz-border-radius:0 0 10px 10px;
   -webkit-border-radius:0 0 10px 10px;
   border-radius:0 0 10px 10px;
  }
  
  #nav ul ul ul li:first-child &gt; a {
   -moz-border-radius:0 10px 0 0;
   -webkit-border-radius:0 10px 0 0;
   border-radius:0 10px 0 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="nav"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
  
  &lt;li&gt;&lt;a href="#"&gt;Our Portfolio&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;One Dropdown&lt;/a&gt;
   &lt;ul&gt;
   &lt;li&gt;&lt;a href="#"&gt;Level 2.1&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;Level 2.2&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;Level 2.3&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;Level 2.4&lt;/a&gt;&lt;/li&gt;
  
   &lt;li&gt;&lt;a href="#"&gt;Level 2.5&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Three Levels&lt;/a&gt;
   &lt;ul&gt;
   &lt;li&gt;&lt;a href="#"&gt;Level 2.1&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;Level 2.2&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;Level 2.3 &gt;&lt;/a&gt;
  
    &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Level 2.3.1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Level 2.3.2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Level 2.3.3 &gt;&lt;/a&gt;
  
  
  &lt;ul&gt;
  &lt;li&gt;&lt;a href='URL LINK TO LABEL/WEBSITE/PAGE'&gt;SUB-CATEGORY 2A&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href='URL LINK TO LABEL/WEBSITE/PAGE'&gt;SUB-CATEGORY 2B&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  
  
  
  
  
  &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Level 2.3.4&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Level 2.3.5&lt;/a&gt;&lt;/li&gt;
  
    &lt;li&gt;&lt;a href="#"&gt;Level 2.3.6&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Level 2.3.7&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
   &lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;Level 2.4&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;Level 2.5&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;About Me&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;AlhamduLillah&lt;/a&gt;&lt;/li&gt;
  
  
  &lt;/ul&gt;
  
  
  
  
  
  
  
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>