Menu Suspenso

Olá pessoal,

peguei um exemplo de um menu suspenso que utiliza somente CSS, porém não estou conseguindo adaptar para a minha aplicação.

Segue abaixo:

* {

 box-sizing: border-box;
}

body {

 margin: 0;
}

/Configurações Padrões/
ul.menu, .menu li, .menu a{ margin:0; padding:0; list-style:none; text-decoration:none; width:100%; }
ul.menu ul{ position:absolute; display:none;}

/ Configurações nivel 1/
ul.menu{ float:left; font-family:Verdana, Geneva, sans-serif; font-size:15px; padding:0 5px;}
.menu li{ float:left; width:auto; position:relative;}
.menu li a{ display:block; padding:0 20px; line-height:45px; height:45px; float:left; width:240px; transition:all 0.1s linear; }

/ Configurações nivel 2/
.menu li:hover > ul.submenu-1{ display:block; top:45px; left:0; padding:0px; width:250px; }
.menu ul.submenu-1 a{ padding:0 20px; width:250px; }

/ Configurações nivel 2/
.menu li:hover > ul.submenu-2{ display:block; top:0; padding:0px; width:250px; left:240px; }
.menu ul.submenu-2 a{ width:250px; padding:0 20px; }

/ Configurações nivel 3/
.menu li:hover > ul.submenu-3{ display:block; top:0; padding:0px; width:250px; left:240px; }
.menu ul.submenu-3 a{ width:250px; padding:0 20px; }

.column1 {
 float: left;
 width: 250px;
 padding: 10px;
 min-height: 250px;
}

.column1 a {

 float: none;
 color: black;
 padding: 16px;
 text-decoration: none;
 display: block;
 text-align: left;
}

.column1 a:hover {
}

.column4 {
 float: right;
 width: 300px;
 padding: 10px;
 min-height: 250px;
 position:relative;
 top:0px;
}

.column4 a {

 float: none;
 color: black;
 padding: 16px;
 text-decoration: none;
 display: block;
 text-align: left;
}

.column4 a:hover {
}

.row:after {

 content: "";
 display: table;
 clear: both;
}

/Configurações de cores/

/nivel 1/
.menu{background:#CCC; }
.menu a{ color:#000; }
.menu li:hover > a{ color:#000; }

/nivel 2/
.submenu-1{}
.submenu-1 a{color:#000;}
.submenu-1 li:hover > a{ color:#000; }

/nivel 3/
.submenu-2{ }
.submenu-2 a{color:#000;};
.submenu-2 li:hover > a{ color:#000; }

/nivel 3/
.submenu-3{ }
.submenu-3 a{color:#000;}
.submenu-3 li:hover > a{ color:#000; }

<ul class="menu"> <!-- Esse é o 1 nivel ou o nivel principal -->
 <li><a href="#">Categorias <i class="fa fa-caret-down"></i></a>
 <ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down -->
 <li><a href="#">Departamento 1 <i class="fa fa-caret-right"></i></a>
 <ul class="submenu-2"> <!-- Esse é o 3 nivel ou o Segundo Drop Down -->
 <li><a href="#">Categoria 1</a></li>
 <li><a href="#">Categoria 11</a></li>
 <li><a href="#">Categoria 111 <i class="fa fa-caret-right"></i></a>
 <ul class="submenu-3"> <!-- Esse é o 4 nivel ou o Terceiro Drop Down -->
 <li><a href="#">Subcategoria 1</a></li>
 <li><a href="#">Subcategoria 11</a></li>
 <li><a href="#">Subcategoria 111</a></li>
 </ul>
 </li>
 </ul>
 </li>
 <li><a href="#">Departamento 2 <i class="fa fa-caret-right"></i></a>
 <ul class="submenu-2"> <!-- Esse é o 3 nivel ou o Segundo Drop Down -->
 <li><a href="#">Categoria 1</a></li>
 <li><a href="#">Categoria 11</a></li>
 <li><a href="#">Categoria 111 <i class="fa fa-caret-right"></i></a>
 <ul class="submenu-3"> <!-- Esse é o 4 nivel ou o Terceiro Drop Down -->
 <li><a href="#">Subcategoria 1</a></li>
 <li><a href="#">Subcategoria 11</a></li>
 <li><a href="#">Subcategoria 111</a></li>
 </ul>
 </li>
 </ul>
 </li>
 </ul>
 </li>
</ul>

	 

	A primeira imagem é o resultado e a segunda imagem, seria o que estou querendo fazer.

	 

	Alguém consegue me explicar o que está de errado?

	 

	Agradeço a atenção de todos!