From 3f8ca69c8c6c8c91a2ca4cbe90c85e4b71ca1528 Mon Sep 17 00:00:00 2001
From: Arsalan <67230071+arsalanfiroozi@users.noreply.github.com>
Date: Thu, 23 Dec 2021 19:08:14 +0330
Subject: [PATCH 1/3] Add a sample code for Dropdown item.

---
 index.html | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/index.html b/index.html
index c81c19074..97bb3c926 100644
--- a/index.html
+++ b/index.html
@@ -22,6 +22,10 @@
   <link rel="stylesheet" href="css/normalize.css">
   <link rel="stylesheet" href="css/skeleton.css">
 
+  <!-- CSS
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <script href="js/script.js"></script>
+  
   <!-- Favicon
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
   <link rel="icon" type="image/png" href="images/favicon.png">
@@ -37,6 +41,19 @@
         <h4>Basic Page</h4>
         <p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton documentation</a>.</p>
       </div>
+      <div class="one-half column" style="margin-top: 25%">
+        <div class="dropdown">
+			<button class="dropdown-button">
+				Click
+			</button>
+			<div class="dropdown-menu">
+				<a class="dropdown-item" href="#">Option 1</a>
+				<a class="dropdown-item" href="#">Option 2</a>
+				<a class="dropdown-item" href="#">Option 3</a>
+				<a class="dropdown-item" href="#">Option 4</a>
+			</div>
+		</div>
+      </div>
     </div>
   </div>
 

From d2b8a0494968f7e8af2c377852ddcc4f6f38a6b2 Mon Sep 17 00:00:00 2001
From: Arsalan <67230071+arsalanfiroozi@users.noreply.github.com>
Date: Thu, 23 Dec 2021 19:09:19 +0330
Subject: [PATCH 2/3] Add CSS Classes for Dropdown

---
 css/skeleton.css | 53 ++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 51 insertions(+), 2 deletions(-)

diff --git a/css/skeleton.css b/css/skeleton.css
index f28bf6c59..40d91e605 100644
--- a/css/skeleton.css
+++ b/css/skeleton.css
@@ -389,8 +389,58 @@ hr {
 .u-cf {
   content: "";
   display: table;
-  clear: both; }
+  clear: both;
+}
+ 
+.dropdown{
+	display: grid;
+	margin: auto;
+	width: 50%;
+	transition-duration: 0.2s;
+	-webkit-transition-duration: 0.2s;
+}
+ 
+.dropdown-menu{
+	display: none;
+	/* display: grid; */
+    border: 1px solid #bbb;	
+	border-radius: 2px;
+	margin-right: 2px;
+	transition-duration: 0.2s;
+	-webkit-transition-duration: 0.2s;
+}
 
+.dropdown:hover  .dropdown-menu{
+	display: grid;
+	transition-duration: 0.2s;
+	-webkit-transition-duration: 0.2s;
+}
+
+.dropdown-button{
+	margin-bottom:0px;
+	transition-duration: 0.2s;
+	-webkit-transition-duration: 0.2s;
+}
+
+.dropdown-item{
+	display: inline-block;
+    height: 38px;
+    padding: 0 30px;
+    color: #555;
+    text-align: center;
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 38px;
+    letter-spacing: .1rem;
+    text-transform: uppercase;
+    text-decoration: none;
+    white-space: nowrap;
+    background-color: transparent;
+    cursor: pointer;
+    box-sizing: border-box;
+	transition-duration: 0.2s;
+	-webkit-transition-duration: 0.2s;
+}
 
 /* Media Queries
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
@@ -401,7 +451,6 @@ on small devices, paste the mobile query code up in the buttons section and styl
 there.
 */
 
-
 /* Larger than mobile */
 @media (min-width: 400px) {}
 

From d426b6c32a28e3d94cfcf0402f3f91881922418d Mon Sep 17 00:00:00 2001
From: Arsalan <67230071+arsalanfiroozi@users.noreply.github.com>
Date: Thu, 23 Dec 2021 19:13:20 +0330
Subject: [PATCH 3/3] Remove extra js

---
 index.html | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/index.html b/index.html
index 97bb3c926..53f845394 100644
--- a/index.html
+++ b/index.html
@@ -21,10 +21,6 @@
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
   <link rel="stylesheet" href="css/normalize.css">
   <link rel="stylesheet" href="css/skeleton.css">
-
-  <!-- CSS
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  <script href="js/script.js"></script>
   
   <!-- Favicon
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->