anchor.diff:  }
   ', :css %>
   
  -<a href="#" class="customized-dropdown-docs">Button Base, Size, Style &amp; Shine</a>
  +<a href="#" data-dropdown="drop6" class="customized-dropdown-docs">Button Base, Size, Style &amp; Shine</a>
   
       <h5>Default SCSS Variables</h5>
   <%= code_example '
  
positive.code: 
      <a href="#" data-dropdown="drop1" class="button dropdown">Dropdown Button</a><br>
  
      <ul id="drop1" data-dropdown-content class="f-dropdown">
        <li><a href="#">This is a link</a></li>
        <li><a href="#">This is another</a></li>
        <li><a href="#">Yet another</a></li>
      </ul>
  
      <p>You'll notice that <code>data-dropdown="drop1"</code> and <code>id="drop1"</code> have similar values. This is what tells the dropdown plugin where to look to find the position to attach the dropdown element to.</p>
    </div>
  </div>
  
negative.code:   <li><a href="#">This is another</a></li>
    <li><a href="#">Yet another</a></li>
  </ul>
  <ul id="drop1" data-dropdown-content class="f-dropdown">
    <li><a href="#">This is a link</a></li>
    <li><a href="#">This is another</a></li>
    <li><a href="#">Yet another</a></li>
  </ul>
  <ul id="drop2" data-dropdown-content class="f-dropdown">
    <li><a href="#">This is a link</a></li>
    <li><a href="#">This is another</a></li>
  