title: Add tooltip tail to a CSS dropdown menu?
body: <p>I would like my dropdown menu to have a tooltip tail under each dropdown. The CSS dropdown tutorial was easy, but I can't figure out how to add the arrow. <a href="http://jsfiddle.net/FXQuincy/xFUun/" rel="nofollow noreferrer">See jsfiddle</a>                  </p>
  
  <p><img src="https://i.stack.imgur.com/RLfNW.jpg" alt="enter image description here"></p>
  
  <p><strong>HTML</strong><br></p>
  
  <pre><code>&lt;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;Tutorials&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Photoshop&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Illustrator&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Web Design&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;HTML&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;CSS&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Articles&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Web Design&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;User Experience&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Inspiration&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS</strong><br></p>
  
  <pre><code>&lt;style&gt;
  
  nav {
  margin: 100px auto; 
  text-align: center;
  }
  
  nav ul ul {
  display: none;
  }
  
  nav ul li:hover &gt; ul {
      display: block;
  }
  
  
  nav ul {
  background: #efefef; 
  background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
  background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
  background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
  box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
  padding: 0 20px;
  border-radius: 10px;  
  list-style: none;
  position: relative;
  display: inline-table;
  }
  nav ul:after {
      content: ""; clear: both; display: block;
  }
  
  nav ul li {
      float: left;
  }
      nav ul li:hover {
          background: #4b545f;
          background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
          background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
          background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
      }
          nav ul li:hover a {
              color: #fff;
          }
  
      nav ul li a {
          display: block; padding: 25px 40px;
          color: #757575; text-decoration: none;
      }
  
  
  nav ul ul {
      background: #5f6975; border-radius: 0px; padding: 0;
      position: absolute; top: 100%;
  }
      nav ul ul li {
          float: none; 
          border-top: 1px solid #6b727c;
          border-bottom: 1px solid #575f6a; position: relative;
      }
          nav ul ul li a {
              padding: 15px 40px;
              color: #fff;
          }   
              nav ul ul li a:hover {
                  background: #4b545f;
              }
  
  nav ul ul ul {
      position: absolute; left: 100%; top:0;
  }
  
  &lt;/style&gt;
  </code></pre>