Ставим вертикальное выпадающие меню на CSS

<ul  class="drop_vert_menu">
{% for entry in entries %}
        <li><a href="{{ entry.link }}">{{ entry.cat }}</a>
         <!-- Если у категории есть подкатегории, то открываем новый уровень вложенности -->
    {% if (entry.flags.hasChildren) %}
    <ul>
{% else %}
    </li>
    {% if isSet(entry.closeToLevel) and entry.level > 0 %}
    <!-- Если после этой категории закрывается 1 или несколько уровней - выводим закрывающиеся </ul> -->
        {% for i in (entry.closeToLevel+1) .. entry.level %}
            </ul></li>
        {% endfor %}  		
    {% endif %}        
{% endif %}  
{% endfor %}
</ul>

.drop_vert_menu {
    list-style-type: none; 
    width: 198px;
    margin: 0; 
    padding: 0;
 }

.drop_vert_menu  ul {
    list-style-type: none; 
    width: 180px;
    margin: 0; 
    padding: 0; 
}
.drop_vert_menu > li{
  position: relative; 
  background: url(../images/vert_css_menu_0.png) no-repeat 0 0; 
  padding:10px 0px 10px 16px;
  border-top: 1px solid White;
}

.drop_vert_menu > li:hover {
background: url(../images/vert_css_menu_1.png) no-repeat 0 0;
}
.drop_vert_menu > li > a{
  font-size:18px;
  color: White;
  text-decoration:none;
}

  .drop_vert_menu li ul {
    position: absolute; 
    display: none; 
    top: 2px; 
    left: 195px; 
   }

 .drop_vert_menu li:hover ul {
   display: block; 
   }

.drop_vert_menu li ul li{
  text-align:left;
  background: #59C113;
  padding: 8px 0px 8px 10px;
}

.drop_vert_menu li ul li:hover {
  background: #87DA50;

}

.drop_vert_menu li ul li a{
  font-size:14px;
  color:White;
  text-decoration:none;
}

.drop_vert_menu li ul li a:hover{
  font-size: 14px;
  color: White;
  text-decoration:none;
}