절대적으로 위치하는 컨테이너 선회에서 UL LI를 올바르게 설정하려면 어떻게합니까?

Question

나는 절대적으로 위치가 지정된 div에 정렬되지 않은 목록이 있습니다. 개별 li 요소에 호버 효과를 적용하려고 시도하고 있으며 단순히 작동하지 않습니다. 커서는 li의 텍스트보다 약간 위에있을 때만 호버 효과를 트리거합니다.

이것은 반응 형 디자인 레이아웃의 가장 넓은 부분이며 가장 큰 상태가 될 때까지 호버가 잘 작동합니다. 설계 관련 문제로 포함 된 div를 절대 위치로 전환해야하며 많은 실험을 실행했으며 절대 위치 지정이 가능하지만 컨테이너에서 최종 컨테이너를 제거하지 못하면 컨테이너를 올바르게 배치 할 수 없습니다.

이 하나는 나를 미치게합니다.

.secondary_header{ 
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7); 
    position:absolute; 
    width:700px; 
    border-bottom-right-radius:60px; 
    height:60px; 
} 

.secondary_header ul{ 
    margin:0 auto; 
    width:100%; 
} 

.secondary_header ul li{ 
    background-image:url(../images/audio_icon.png); 
    background-repeat:no-repeat; 
    background-position:0px; 
    padding-left:50px; 
    float:left; 
    list-style:none; 
    line-height:60px; 
    padding-left:50px; 
    height:60px; 

} 

.secondary_header ul li:hover{ 
    color:#09F; 
} 

Answer 1

제공된 정보가 충분하지 않습니다. 다음 코드가 귀하의 요구 사항을 충족 시키면 행복하거나 그렇지 않으면 귀하의 요구 사항을 정교하게 작성하여 좋은 아이디어를 얻을 수 있도록하십시오.

.secondary_header{ 
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7); 
    position:absolute; 
    width:700px; 
    border-bottom-right-radius:60px; 
    height:60px; 
} 

.secondary_header ul{ 
    margin:0; 
    padding:0px; 
    width:100%; 
} 

.secondary_header ul li{ 
    background-image:url(../images/audio_icon.png); 
    background-repeat:no-repeat; 
    background-position:0px; 
    padding:0 15px; 
    float:left; 
    list-style:none; 
    line-height:60px; 
    height:60px; 
    cursor:pointer; 

} 

.secondary_header ul li:hover{ 
    color:#09F; 
}