CSS溢出:可见不起作用

时间:2017-03-22 08:13:38

标签: html css overflow nanoscroller

Don不属性溢出-y:滚动; overflow-x:可见;一个元素。帮助解决问题。如果左侧菜单已折叠,当您将鼠标悬停在具有类子菜单的子元素上时,由于溢出滚动,子菜单不会显示。如何解决这个问题?



.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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

属性溢出:滚动重叠溢出:可见。因此,以这种方式解决问题是不可能的。