(master): Refactor dropdown

Author: Joe Crick

index.html

@@ -456,8 +456,8 @@ <h3>Toggling Button Label Collapse</h3>
                     <a name="dropdown"></a>
                     <h2 class="content-subhead">Dropdown</h2>
 
-                    <div tabindex="0" class="onclick-menu">
-                        <ul class="onclick-menu-content">
+                    <div tabindex="0" class="dropdown">
+                        <ul class="dropdown-content">
                             <li>
                                 <button>Edit</button>
                             </li>
@@ -469,8 +469,8 @@ <h2 class="content-subhead">Dropdown</h2>
 
                     <div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;margin-top: 50px;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
                             style="margin: 0; line-height: 125%">
-&lt;div tabindex=<span style="color: #a31515">&quot;0&quot;</span> class=<span style="color: #a31515">&quot;onclick-menu&quot;</span>&gt;
-    &lt;ul class=<span style="color: #a31515">&quot;onclick-menu-content&quot;</span>&gt;
+&lt;div tabindex=<span style="color: #a31515">&quot;0&quot;</span> class=<span style="color: #a31515">&quot;dropdown&quot;</span>&gt;
+    &lt;ul class=<span style="color: #a31515">&quot;dropdown-content&quot;</span>&gt;
         &lt;li&gt;
             &lt;button&gt;Edit&lt;/button&gt;
         &lt;/li&gt;

main.css

@@ -1,6 +1,6 @@
 @import '../lib/variables';
 
-.onclick-menu {
+.dropdown {
   position: relative;
   cursor: pointer;
 
@@ -16,15 +16,15 @@
     pointer-events: none;
     outline: none;
 
-    .onclick-menu-content {
+    .dropdown-content {
       opacity: 1;
       visibility: visible;
       pointer-events: auto;
     }
 
   }
 
-  .onclick-menu-content {
+  .dropdown-content {
     position: absolute;
     z-index: 1;
     opacity: 0;