<div class="left_menu"> <div id="chief"> <a class="chief"><i class="fa fa-user"> 负责的项目</i> <i class="right fa fa-caret-right"></i></a> <ul id="CProjects" style="display: none"> <li><a><i class="fa fa-circle"></i> 开源协会</a></li> <li><a><i class="fa fa-circle"></i> 开源协会</a></li> <li><a><i class="fa fa-circle"></i> 开源协会</a></li> </ul> </div> <div id="cooperator" > <a class="cooperator"><i class="fa fa-users"> 参与的项目</i> <i class="right fa fa-caret-right"></i> </a> <ul id="JProjects" style="display: none"> <li><a><i class="fa fa-circle"></i> 开源协会</a></li> <li><a><i class="fa fa-circle"></i> 开源协会</a></li> <li><a><i class="fa fa-circle"></i> 开源协会</a></li> </ul> </div> <div id="newProject"> <a class="newProject"><i class="fa fa-plus"></i> 新建项目</a> </div> <div id="searchProject"> <a class="searchProject"><i class="fa fa-search"></i> 搜索项目</a> </div></div>
.left_menu {position:relative;width: 20%;height: 100%;background-color: #44515b;}/*负责的项目*/.left_menu #chief{position:relative;width:100%; height:8%;padding-top: 5%;}.left_menu .chief,.left_menu .cooperator,.left_menu #newProject .newProject,.left_menu #searchProject .searchProject{position:relative;left: 5%;font-size: 1vw; color:#989a9b;cursor:pointer;}.left_menu #chief ul,.left_menu #cooperator ul{position: relative;width:100%;padding:0;overflow: hidden;background-color: #1d2933;}.left_menu #chief ul li,.left_menu #cooperator ul li {display:block;margin-left:6%;margin-top: 4%;margin-bottom: 4%;}.left_menu #chief ul li a,.left_menu #cooperator ul li a{position: relative;display: block;font-size: 1vw;color:#989a9b;margin-left: 4%;}.left_menu #chief ul li a:hover,.left_menu #cooperator ul li a:hover{color: #fff;}.left_menu .chief:hover,.left_menu .cooperator:hover,.left_menu #newProject .newProject:hover,.left_menu #searchProject .searchProject:hover{color:#fff;}/*参与的项目*/.left_menu #cooperator,.left_menu #newProject, .left_menu #searchProject{position:relative;width:100%; height:6%;}
发现是给div设置了6%的高度 应该是给div下的a标签设置高度 这样就可以下拉不用覆盖了
试试z-index
把.chief 和 ul z-index设置成一样是这个意思吗