title: CSS overflow: visible not working
body: <p>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?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.fixed-leftmenu .col-left-nano {
     position : relative;
     width    : 100%;
     height   : 100%;
     overflow : visible;
   }
   .fixed-leftmenu .col-left-nano &gt; .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%;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="col-left" class="col-left-nano"&gt;
      &lt;div id="col-left-inner" class="col-left-nano-content" style="padding-right: 12px"&gt;
  
          &lt;div class="collapse navbar-collapse navbar-ex1-collapse" id="sidebar-nav"&gt;
              &lt;ul class="nav nav-pills nav-stacked"&gt;
                  &lt;li&gt;
                      &lt;a href="{% url 'lk' %}" class="
            {% if request.path == '/lk/' %} active {% endif %}"&gt;
                          &lt;i class="fa fa-home"&gt;&lt;/i&gt;
                          &lt;span&gt;blabla&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      {% url 'calendar' as calendar_url %}
                      &lt;a href="{{ calendar_url }}" class="
            {% if calendar_url == request.path %} active {% endif %}"&gt;
                          &lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
                          &lt;span&gt;blabla&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                      {% url 'lesson_list' as lesson_list_url %}
                      &lt;a href="{{ lesson_list_url }}" class="{% if lesson_list_url == request.path %} active {% endif %}"&gt;
                          &lt;i class="fa fa-mortar-board "&gt;&lt;/i&gt;
                          &lt;span&gt;blabla&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
  
                  {% if user.is_admin %}
                  
                  &lt;li class="active  open"&gt;
                      
                      &lt;a href="{{ post_office_attachment_list }}" class="dropdown-toggle {% if post_office_attachment_list == request.path %} active {% endif %}"&gt;
                          &lt;i class="fa fa-send-o"&gt;&lt;/i&gt;
                          &lt;span&gt;blabla&lt;/span&gt;
                          &lt;i class="fa fa-chevron-circle-right drop-icon"&gt;&lt;/i&gt;
                      &lt;/a&gt;
                      &lt;ul class="submenu"&gt;
                         &lt;li&gt;
                              &lt;a href="{{ post_office_attachment_list }}" class="{% if post_office_attachment_list == request.path %} active {% endif %}"&gt;
                                  &lt;i class="fa fa-send-o"&gt;&lt;/i&gt;
                                  &lt;span&gt;blabla&lt;/span&gt;     
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="{{ post_office_email_list }}" class="{% if post_office_email_list == request.path %} active {% endif %}"&gt;
                                  &lt;i class="fa glyphicon-envelope"&gt;&lt;/i&gt;
                                  &lt;span&gt;blabla&lt;/span&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;       
                              &lt;a href="{{ post_office_logs_list }}" class="{% if post_office_logs_list == request.path %} active {% endif %}"&gt;
                                  &lt;i class="fa fa-cogs"&gt;&lt;/i&gt;
                                  &lt;span&gt;blabla&lt;/span&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  
                  
                  &lt;li&gt;
                      {% url 'user_answer_list' as user_answer_list %}
                      &lt;a href="{{ user_answer_list }}" class="{% if user_answer_list == request.path %} active {% endif %}"&gt;
                          &lt;i class="fa glyphicon-pencil"&gt;&lt;/i&gt;
                          &lt;span&gt;blabla&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      {% url 'docs_list' as docs_list %}
                      &lt;a href="{{ docs_list }}" class="{% if docs_list == request.path %} active {% endif %}"&gt;
                          &lt;i class="fa fa-briefcase"&gt;&lt;/i&gt;
                          &lt;span&gt;blabla&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      {% url 'news_list' as news_list %}
                      &lt;a href="{{ news_list }}" class="{% if news_list == request.path %} active {% endif %}"&gt;
                          &lt;i class="fa fa-list"&gt;&lt;/i&gt;
                          &lt;span&gt;news&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
  
                  &lt;li class="active  open"&gt;
                      &lt;a href="{{ callback_list }}" class="dropdown-toggle  {% if callback_list == request.path %} active {% endif %}"&gt;
                          &lt;i class="fa fa-pencil-square-o"&gt;&lt;/i&gt;
                          &lt;span&gt;blabla&lt;/span&gt;
                          &lt;i class="fa fa-chevron-circle-right drop-icon"&gt;&lt;/i&gt;
                      &lt;/a&gt;
                      &lt;ul class="submenu"&gt;
                         &lt;li&gt;
                              &lt;a href="{{ proposal_list }}" class="{% if proposal_list == request.path %} active {% endif %}"&gt;
                                  &lt;i class="fa fa-pencil-square-o"&gt;&lt;/i&gt;
                                  &lt;span&gt;blabla&lt;/span&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="{{ callback_list }}" class="{% if callback_list == request.path %} active {% endif %}"&gt;
                              &lt;i class="fa fa-phone"&gt;&lt;/i&gt;
                              &lt;span&gt;blabla&lt;/span&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                      {% url 'feedback_list' as feedback_list %}
                      &lt;a href="{{ feedback_list }}" class="{% if feedback_list == request.path %} active {% endif %}"&gt;
                          &lt;i class="fa fa-comments"&gt;&lt;/i&gt;
                          &lt;span&gt;blabla&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  
                  
                   &lt;li class="active  open"&gt;
                      &lt;a href="{{ students_list }}" class="dropdown-toggle  {% if students_list == request.path %} active {% endif %}"&gt;
                          &lt;i class="fa fa-users"&gt;&lt;/i&gt;
                          &lt;span&gt;blabla&lt;/span&gt;
                          &lt;i class="fa fa-chevron-circle-right drop-icon"&gt;&lt;/i&gt;
                      &lt;/a&gt;
                      &lt;ul class="submenu"&gt;
                          &lt;li&gt;
                              &lt;a href="{{ students_list }}" class="{% if students_list == request.path %} active {% endif %}"&gt;
                                  &lt;i class="fa fa-users"&gt;&lt;/i&gt;
                                  &lt;span&gt;blabla&lt;/span&gt;
                              &lt;/a&gt;        
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="{{ teacher_list }}" class="{% if teacher_list == request.path %} active {% endif %}"&gt;
                                  &lt;i class="fa fa-male"&gt;&lt;/i&gt;
                                  &lt;span&gt;blabla&lt;/span&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                   
  
                  &lt;li class="{% if direction_url == request.path %}active  open{% endif %} 
                     {% if course_list == request.path %}active  open{% endif %}"&gt;
                      {% url 'direction_list' as direction_url %}
                      &lt;a href="{{ direction_url }}" class="dropdown-toggle  {% if direction_url == request.path %} active {% endif %}"&gt;
                          &lt;i class="fa fa-university"&gt;&lt;/i&gt;
                          &lt;span&gt;blabla&lt;/span&gt;
                          &lt;i class="fa fa-chevron-circle-right drop-icon"&gt;&lt;/i&gt;
                      &lt;/a&gt;
                      &lt;ul class="submenu"&gt;
                          &lt;li&gt;
                              &lt;a href="{{ direction_url }}" class="{% if direction_url == request.path %} active {% endif %}"&gt;
                                  &lt;i class="fa fa-university"&gt;&lt;/i&gt;
                                  &lt;span&gt;blabla&lt;/span&gt;
                              &lt;/a&gt;    
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="{{ course_list }}" class="{% if course_list == request.path %} active {% endif %}"&gt;
                                  &lt;i class="fa fa-mortar-board"&gt;&lt;/i&gt;
                                  &lt;span&gt;blabla&lt;/span&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
  
                      &lt;/ul&gt;
                  &lt;/li&gt;
  
                  {% endif %}
  
                  &lt;li&gt;
                      {% url 'certify' as certify_url %}
                      &lt;a href="{{ certify_url }}"&gt;
                          &lt;i class="fa fa-file-text-o"&gt;&lt;/i&gt;
                          &lt;span&gt;blabla&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>