diff --git a/README.md b/README.md
index ece2473..5f8691f 100644
--- a/README.md
+++ b/README.md
@@ -71,4 +71,5 @@ Check out the easy to use documentation and play arround with it.
- Navbar
- Sidebar
- Cards
+- Dropdown
- Scripts
diff --git a/documentation/dropdown.md b/documentation/dropdown.md
new file mode 100644
index 0000000..d57bd41
--- /dev/null
+++ b/documentation/dropdown.md
@@ -0,0 +1,69 @@
+# Dropdown documentation
+
+This part of the documentation will show you how to use the
+included dropdown menus of ChocolateCSS.
+
+# Basic usage
+
+Using single page dropdown menus with ChocolateCSS is very easy.
+
+```html
+
+
+
+```
+
+The other `div` tag contains three classes. The `dropdown` class defines the general structure of the dropdown.
+The `dropdown-dark` class defines the theme of the dropdown.
+There are three different themes available.
+
+- `dropdown-light`
+- `dropdown-grey`
+- `dropdown-dark`
+
+The `active` class sets the visibility of the dropdown. `active` means, that the dropdown fades in from the top.
+
+Into the other `div` you will have to put a div with the class `dropdown-menu`. Into this you can put your menu elements.
+To define a menu element, you need to put a div into your menu `div` and add another `div` with the class `dropdown-menu-item`.
+
+# Multiple menus
+
+Multiple menus in one dropdown menu are also possible.
+
+```html
+
+```
+
+To get multiple menus in one dropdown to work, you will have to add the `dropdown-toggler.js` script to your html body.
+
+```html
+
+```
+
+After that you can go on with adding a submenu.
+The structure of the submenu is equal to the structure of
+default dropdown menu. Just change the class to `dropdown-submenu`.
+
+```html
+
+```
+
+Your submenu is hidden now.
+To make them callable, you will need to add an id to every menu (Look main example).
+
+Check out the script documentation to learn how to toggle between the different menus of the dropdown.
\ No newline at end of file
diff --git a/documentation/scripts.md b/documentation/scripts.md
index 6f1c18e..58076be 100644
--- a/documentation/scripts.md
+++ b/documentation/scripts.md
@@ -23,4 +23,30 @@ Just add this to the bottom of your HTML body.
```
+# Dropdown script
+Use the `dropdown-toggler.js` script if you want to switch between different menus in your dropdown.
+
+```html
+
+```
+
+Now you can use the script to switch between the menus.
+
+There are two different functions you can use.
+
+`DropdownForwardMenu`
+You can use this function to switch to a new sub menu.
+Its syntax is quite easy.
+```js
+DropdownForwardMenu('from', 'to');
+```
+Just call the function and replace the string parameters with the ids of the menus, you want to switch.
+
+Same with the `DropdownBackwardMenu` function.
+
+```js
+DropdownBackwardMenu('from', 'to');
+```
+
+Its usage is the same as the usage of the `DropdownForwardMenu` function.
\ No newline at end of file
diff --git a/dropdown/animations.scss b/dropdown/animations.scss
new file mode 100644
index 0000000..7c74bfc
--- /dev/null
+++ b/dropdown/animations.scss
@@ -0,0 +1,79 @@
+@import "./dropdown.scss";
+
+.dropdown.active {
+ display: flex;
+ animation-name: showDropdown;
+ animation-fill-mode: forwards;
+ animation-duration: 1s;
+}
+
+@keyframes showDropdown {
+ from {
+ top: -100%;
+ opacity: 0.5;
+ }
+ to {
+ top: 2.5%;
+ opacity: 1;
+ }
+}
+
+.old-out {
+ animation-name: oldOut;
+ animation-duration: .3s;
+ animation-fill-mode: forwards;
+}
+
+@keyframes oldOut {
+ from {
+ left: 0;
+ }
+ to {
+ left: -100%;
+ }
+}
+
+.old-in {
+ animation-name: oldIn;
+ animation-duration: .3s;
+ animation-fill-mode: backwards;
+}
+
+@keyframes oldIn {
+ from {
+ left: 0;
+ }
+ to {
+ left: -100%;
+ }
+}
+
+.new-out {
+ animation-name: newOut;
+ animation-duration: .3s;
+ animation-fill-mode: forwards;
+}
+
+@keyframes newOut {
+ from {
+ right: -10px;
+ }
+ to {
+ right: -100%;
+ }
+}
+
+.new-in {
+ animation-name: newIn;
+ animation-duration: .3s;
+ animation-fill-mode: forwards;
+}
+
+@keyframes newIn {
+ from {
+ right: -100%;
+ }
+ to {
+ right: -10px;
+ }
+}
\ No newline at end of file
diff --git a/dropdown/dropdown.scss b/dropdown/dropdown.scss
new file mode 100644
index 0000000..e909f2c
--- /dev/null
+++ b/dropdown/dropdown.scss
@@ -0,0 +1,10 @@
+.dropdown {
+ width: fit-content;
+ height: fit-content;
+ border-radius: 12px;
+ padding: 10px 10px 10px 10px;
+ display: none;
+ position: absolute;
+ top: -100%;
+ overflow: hidden;
+}
diff --git a/dropdown/menu.scss b/dropdown/menu.scss
new file mode 100644
index 0000000..07dfe78
--- /dev/null
+++ b/dropdown/menu.scss
@@ -0,0 +1,27 @@
+.dropdown-menu {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+}
+
+.dropdown-submenu {
+ @extend .dropdown-menu;
+ position: absolute;
+ right: -100%;
+}
+
+.dropdown-menu-item {
+ width: 200px;
+ height: 50px;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ border-radius: 7px;
+ transition: .3s;
+}
+
+.dropdown-menu-item:hover {
+ filter: brightness(2);
+}
\ No newline at end of file
diff --git a/dropdown/theme.scss b/dropdown/theme.scss
new file mode 100644
index 0000000..8977d9f
--- /dev/null
+++ b/dropdown/theme.scss
@@ -0,0 +1,17 @@
+@import "./dropdown.scss";
+@import "./menu.scss";
+
+@mixin dropdownTheme($class-name, $bg-color, $text-color) {
+
+ .dropdown.#{$class-name} {
+ background: $bg-color;
+ box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
+ }
+
+ .#{$class-name} .dropdown-menu-item {
+ color: $text-color;
+ font-family: "Roboto", sans-serif;
+ font-size: 1.2em;
+ background: $bg-color;
+ }
+}
\ No newline at end of file
diff --git a/js/dropdown-toggler.js b/js/dropdown-toggler.js
new file mode 100644
index 0000000..dde02ae
--- /dev/null
+++ b/js/dropdown-toggler.js
@@ -0,0 +1,34 @@
+
+
+function DropdownForwardMenu(from, to) {
+
+ let fromElement = document.getElementById(from);
+ removeUnusedClasses(fromElement);
+
+ let toElement = document.getElementById(to);
+ removeUnusedClasses(toElement);
+
+ fromElement.classList.add('old-out');
+ toElement.classList.add('new-in');
+
+}
+
+function DropdownBackwardMenu(from, to) {
+
+ let fromElement = document.getElementById(from);
+ removeUnusedClasses(fromElement);
+
+ let toElement = document.getElementById(to);
+ removeUnusedClasses(toElement);
+
+ fromElement.classList.add('new-out');
+ toElement.classList.add('old-in');
+}
+
+function removeUnusedClasses(element) {
+
+ element.classList.contains('old-out') ? element.classList.remove('old-out') : null;
+ element.classList.contains('old-in') ? element.classList.remove('old-in') : null;
+ element.classList.contains('new-out') ? element.classList.remove('new-out') : null;
+ element.classList.contains('new-in') ? element.classList.remove('new-in') : null;
+}
\ No newline at end of file
diff --git a/main.scss b/main.scss
index e098d66..d8f7eb3 100644
--- a/main.scss
+++ b/main.scss
@@ -27,6 +27,13 @@
@import "./cards/responsive.scss";
+// Dropdown
+@import "./dropdown/dropdown.scss";
+@import "./dropdown/menu.scss";
+@import "./dropdown/theme.scss";
+@import "./dropdown/animations.scss";
+
+
// Buttons
@include buttonBase(btn-blue, #1d3bae, #264BD9, #fff);
@@ -62,3 +69,8 @@
@include cardTheme(card-light, #fff, rgba(0,0,0,0.4), #000);
@include cardTheme(card-grey, #303030, rgba(0,0,0,0.6), #fff);
@include cardTheme(card-dark, #161616, rgba(0,0,0,0.6), #fff);
+
+// Dropdown
+@include dropdownTheme(dropdown-light, rgb(221, 221, 221), #000);
+@include dropdownTheme(dropdown-grey, rgb(153, 153, 153), #fff);
+@include dropdownTheme(dropdown-dark, #232323, #fff);
\ No newline at end of file