How to Create a CSS Only (Vertical) Drop-Down Menu

*{padding:0;margin:0;}body{font:16px/1 sans-serif}

/*VERTICAL MENU*/nav.vertical{  position:relative;  width:200px;}
/* ALL UL */nav.vertical ul{  list-style: none;}/* ALL LI */nav.vertical li{  position:relative;}/* ALL A */nav.vertical a{  display:block;  color:#eee;  text-decoration:none;  padding:10px 15px;  background:#667;  transition:0.2s;}/* ALL A HOVER */nav.vertical li:hover > a{  background:#778;}
/* INNER UL HIDE */nav.vertical ul ul{  position:absolute;  left:0%;  top:0;  width:100%;  visibility:hidden;  opacity:0;  transition: transform 0.2s;  transform: translateX(50px);}/* INNER UL SHOW */nav.vertical li:hover > ul{  left:100%;  visibility:visible;  opacity:1;  transform: translateX(0px);}

<nav class="vertical">  <ul>    <li><a href="">Home</a></li>    <li><a href="#">Products +</a>      <ul>        <li><a href="#">Widgets</a></li>        <li>          <a href="#">Sites +</a>          <ul>            <li><a href="#">Site 1</a></li>            <li><a href="#">Site 2</a></li>          </ul>        </li>        <li>          <a href="#">Gadgets +</a>          <ul>            <li><a href="#">Gadget 1</a></li>            <li><a href="#">Gadget 2</a></li>          </ul>        </li>      </ul>    </li>    <li><a href="">Contact</a></li>  </ul></nav>

How do I create a vertical dropdown menu

Your HTML structure is incorrect. The <ul> for the sub-menu should be nested inside the <li> for fav blogs like this:

<nav>
<ul>
    <li><a href="#">There's some shit here </a>
        <ul>
            <li><a href="#">fav blogs </a>
                    <ul>
                    <li><a href="http://rawrmerawr.tumblr.com/" target="_blank">sun&stars</a></li>
                    <li><a href="#" target="_blank">realfriennds</a></li>
                    </ul>
            </li>
            <li><a href="#">musicc</a></li>
            <li><a href="#">only me!!</a></li>
        </ul>
    </li>
</ul>
</nav>

and this CSS:

nav {
    position: fixed;
    margin: 0 0 0 5px;
}

nav>ul>li>ul>li:hover>ul {
        display: block;
        position: absolute;
        margin-left: 50px;
        margin-top: -12px;
}

nav>ul>li>ul {
        display: none;
}

nav>ul>li>ul>li>ul {
        display: none;
}

nav>ul>li:hover>ul {
        display: block;
        margin: 0 0 0 10px;
}

How to make my clickable vertical Dropdown menu work properly with only css?

Added some animation and made it absolute by following your code: Fiddle

No animation: Fiddle

.menu {  position: relative;  padding: 1em;  font-weight: 700;  width: 100%;  border: 1px solid #eee;  border-right: none;}
.sub-menu {  max-height: 0;  transition: max-height 0.4s ease-in-out;  -webkit-transition: max-height 0.4s ease-in-out;  -moz-transition: max-height 0.4s ease-in-out;  -ms-transition: max-height 0.4s ease-in-out;  overflow: hidden;  padding: 0, 0.5em, 0.5em;}
.close {  opacity: 0;}
.open {  opacity: 1;  z-index: 5;}
#open-1:checked~.close {  opacity: 1;}
input[type="radio"] {  display: none;}
input[type="radio"]~label {  position: absolute;  right: 10px;  top: 20px;  transition: 0.4s ease-in-out;  -webkit-transition: 0.4s ease-in-out;  -moz-transition: 0.4s ease-in-out;  -ms-transition: 0.4s ease-in-out;  cursor: pointer;}
#open-1:checked~.open {  opacity: 0;  z-index: 0;}
#close-1:checked~.sub-menu {  max-height: 0px;  transition: max-height 0.4s ease-in-out;  -webkit-transition: max-height 0.4s ease-in-out;  -moz-transition: max-height 0.4s ease-in-out;  -ms-transition: max-height 0.4s ease-in-out;}
#open-1:checked~.sub-menu {  max-height: 320px;  transition: max-height 0.4s ease-in-out;  -webkit-transition: max-height 0.4s ease-in-out;  -moz-transition: max-height 0.4s ease-in-out;  -ms-transition: max-height 0.4s ease-in-out;}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<li class="menu">  <a href="#" tabindex=0>First</a>  <input type="radio" id="open-1" name="toggle1">  <label class="open" for="open-1">    <i class="fa fa-angle-down"></i>  </label>  <input type="radio" id="close-1" name="toggle1">  <label class="close" for="close-1">    <i class="fa fa-angle-up"></i>  </label>  <ul class="sub-menu">    <li><a href="#">Test</a></li>    <li><a href="#">Test</a></li>  </ul></li>

.submenu li {
  clear: both;
}

.dropdown {
  float: left;
  display: inline-block;
  height: 55px; /* overflow: hidden will hide the dropdown menu, use fixed height instead */
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  top: 55px; /* must specify the top position */
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.header {
  background-color: #350752;
  overflow: visible; /* overflow: hidden will hide the dropdown menu */
}

.header > a, /* use > to select the direct child <a> instead of all of <a> child */
.dropdown > a {
  float: left;
  color: #dcb0f7;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.header a:hover {
  background-color: #15bccf;
  color: white;
}

.header a:active {
  background-color: #c7860e;
  color: white;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div class="header">
    <a class="active" href="{% url 'home' %}">Home</a>
    <div class="dropdown">
        <a href="/">Profile</a>
        <div class="dropdown-content">
            <a href="{% url 'logout' %}">Logout</a>
            <a href="/">Customize Profile</a>
        </div>
    </div>
</div>
</body>
</html>

.widget ul {
    padding: 0 !important;
}

#sidebar-left-1 .widget-content nav {
    width: unset !important;
}

#sidebar-left-1 {
    margin: 0 !important;
}