下拉列表覆盖了本来下一项的元素 找不到问题在哪里

Question

 负责的项目 

•  开源协会
•  开源协会
•  开源协会

 参与的项目 

•  开源协会
•  开源协会
•  开源协会

 新建项目

 搜索项目

 感觉应该是css有问题 点击下拉时间并没有问题 有firebug审查元素不知道怎么解决

<div class="left_menu">
    <div id="chief">
        <a class="chief"><i class="fa fa-user">&nbsp;负责的项目</i>&nbsp;<i class="right fa fa-caret-right"></i></a>
        <ul id="CProjects" style="display: none">
            <li><a><i class="fa fa-circle"></i>&nbsp;开源协会</a></li>
            <li><a><i class="fa fa-circle"></i>&nbsp;开源协会</a></li>
            <li><a><i class="fa fa-circle"></i>&nbsp;开源协会</a></li>
        </ul>
    </div>
    <div id="cooperator" >
        <a class="cooperator"><i class="fa fa-users">&nbsp;参与的项目</i>&nbsp;<i class="right fa fa-caret-right"></i>
        </a>
        <ul id="JProjects" style="display: none">
            <li><a><i class="fa fa-circle"></i>&nbsp;开源协会</a></li>
            <li><a><i class="fa fa-circle"></i>&nbsp;开源协会</a></li>
            <li><a><i class="fa fa-circle"></i>&nbsp;开源协会</a></li>
        </ul>
    </div>
    <div id="newProject">
        <a class="newProject"><i class="fa fa-plus"></i>&nbsp;新建项目</a>
    </div>
    <div id="searchProject">
        <a class="searchProject"><i class="fa fa-search"></i>&nbsp;搜索项目</a>
    </div>
</div>

 

css代码

.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%;
}

Answer 1

发现是给div设置了6%的高度 应该是给div下的a标签设置高度 这样就可以下拉不用覆盖了

Answer 2

试试z-index