html - CSS 溢出 : visible not working

标签 html css overflow nanoscroller

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

.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>

最佳答案

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

关于html - CSS 溢出 : visible not working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42946042/

相关文章:

javascript - 所有类型按钮的事件处理程序

html - 如何将 <div> 居中并让它使用固定定位?

c - 为什么当我对大于 2^15 - 1 的 int 值进行操作时不会出现溢出?

html - 防止容器跳跃

html - 如何溢出 3 级深度菜单 ul > li > ul > li > ul > li

css - 如何使div在固定位置水平居中?

asp.net - TextBox 或 Html 区域中的换行符

css - 在一行内使列高度均匀

css - "user agents must process (or act as though they do) each link as though the link were to a separate style sheet"这句话是什么意思?

html - css - 将输入元素的背景设置为三种颜色的组合