CSS overflow: visible not working - html

Question

Don't properties overflow-y: scroll; overflow-x: visible; to one element. Help solve the problem. If the left menu is collapsed, when you hover over the li with a child element with class submenu, the submenu doesn't appear because of overflow-y scroll. How to get around the problem?
.fixed-leftmenu .col-left-nano {
position : relative;
width : 100%;
height : 100%;
overflow : visible;
}
.fixed-leftmenu .col-left-nano > .col-left-nano-content {
position : absolute;
overflow-y : scroll;
overflow-x : visible;
top : 0;
right : 0;
bottom : 0;
left : 0;
}
.fixed-leftmenu #nav-col {
height: 100%;
}
<section id="col-left" class="col-left-nano">
<div id="col-left-inner" class="col-left-nano-content" style="padding-right: 12px">
<div class="collapse navbar-collapse navbar-ex1-collapse" id="sidebar-nav">
<ul class="nav nav-pills nav-stacked">
<li>
<a href="{% url 'lk' %}" class="
{% if request.path == '/lk/' %} active {% endif %}">
<i class="fa fa-home"></i>
<span>blabla</span>
</a>
</li>
<li>
{% url 'calendar' as calendar_url %}
<a href="{{ calendar_url }}" class="
{% if calendar_url == request.path %} active {% endif %}">
<i class="fa fa-calendar"></i>
<span>blabla</span>
</a>
</li>
<li>
{% url 'lesson_list' as lesson_list_url %}
<a href="{{ lesson_list_url }}" class="{% if lesson_list_url == request.path %} active {% endif %}">
<i class="fa fa-mortar-board "></i>
<span>blabla</span>
</a>
</li>
{% if user.is_admin %}
<li class="active open">
<a href="{{ post_office_attachment_list }}" class="dropdown-toggle {% if post_office_attachment_list == request.path %} active {% endif %}">
<i class="fa fa-send-o"></i>
<span>blabla</span>
<i class="fa fa-chevron-circle-right drop-icon"></i>
</a>
<ul class="submenu">
<li>
<a href="{{ post_office_attachment_list }}" class="{% if post_office_attachment_list == request.path %} active {% endif %}">
<i class="fa fa-send-o"></i>
<span>blabla</span>
</a>
</li>
<li>
<a href="{{ post_office_email_list }}" class="{% if post_office_email_list == request.path %} active {% endif %}">
<i class="fa glyphicon-envelope"></i>
<span>blabla</span>
</a>
</li>
<li>
<a href="{{ post_office_logs_list }}" class="{% if post_office_logs_list == request.path %} active {% endif %}">
<i class="fa fa-cogs"></i>
<span>blabla</span>
</a>
</li>
</ul>
</li>
<li>
{% url 'user_answer_list' as user_answer_list %}
<a href="{{ user_answer_list }}" class="{% if user_answer_list == request.path %} active {% endif %}">
<i class="fa glyphicon-pencil"></i>
<span>blabla</span>
</a>
</li>
<li>
{% url 'docs_list' as docs_list %}
<a href="{{ docs_list }}" class="{% if docs_list == request.path %} active {% endif %}">
<i class="fa fa-briefcase"></i>
<span>blabla</span>
</a>
</li>
<li>
{% url 'news_list' as news_list %}
<a href="{{ news_list }}" class="{% if news_list == request.path %} active {% endif %}">
<i class="fa fa-list"></i>
<span>news</span>
</a>
</li>
<li class="active open">
<a href="{{ callback_list }}" class="dropdown-toggle {% if callback_list == request.path %} active {% endif %}">
<i class="fa fa-pencil-square-o"></i>
<span>blabla</span>
<i class="fa fa-chevron-circle-right drop-icon"></i>
</a>
<ul class="submenu">
<li>
<a href="{{ proposal_list }}" class="{% if proposal_list == request.path %} active {% endif %}">
<i class="fa fa-pencil-square-o"></i>
<span>blabla</span>
</a>
</li>
<li>
<a href="{{ callback_list }}" class="{% if callback_list == request.path %} active {% endif %}">
<i class="fa fa-phone"></i>
<span>blabla</span>
</a>
</li>
</ul>
</li>
<li>
{% url 'feedback_list' as feedback_list %}
<a href="{{ feedback_list }}" class="{% if feedback_list == request.path %} active {% endif %}">
<i class="fa fa-comments"></i>
<span>blabla</span>
</a>
</li>
<li class="active open">
<a href="{{ students_list }}" class="dropdown-toggle {% if students_list == request.path %} active {% endif %}">
<i class="fa fa-users"></i>
<span>blabla</span>
<i class="fa fa-chevron-circle-right drop-icon"></i>
</a>
<ul class="submenu">
<li>
<a href="{{ students_list }}" class="{% if students_list == request.path %} active {% endif %}">
<i class="fa fa-users"></i>
<span>blabla</span>
</a>
</li>
<li>
<a href="{{ teacher_list }}" class="{% if teacher_list == request.path %} active {% endif %}">
<i class="fa fa-male"></i>
<span>blabla</span>
</a>
</li>
</ul>
</li>
<li class="{% if direction_url == request.path %}active open{% endif %}
{% if course_list == request.path %}active open{% endif %}">
{% url 'direction_list' as direction_url %}
<a href="{{ direction_url }}" class="dropdown-toggle {% if direction_url == request.path %} active {% endif %}">
<i class="fa fa-university"></i>
<span>blabla</span>
<i class="fa fa-chevron-circle-right drop-icon"></i>
</a>
<ul class="submenu">
<li>
<a href="{{ direction_url }}" class="{% if direction_url == request.path %} active {% endif %}">
<i class="fa fa-university"></i>
<span>blabla</span>
</a>
</li>
<li>
<a href="{{ course_list }}" class="{% if course_list == request.path %} active {% endif %}">
<i class="fa fa-mortar-board"></i>
<span>blabla</span>
</a>
</li>
</ul>
</li>
{% endif %}
<li>
{% url 'certify' as certify_url %}
<a href="{{ certify_url }}">
<i class="fa fa-file-text-o"></i>
<span>blabla</span>
</a>
</li>
</ul>
</div>
</div>
</section>

Answer 1

Property overflow: scroll overlaps the overflow: visible. Therefore, the problem to solve in this way it is impossible.