테두리 아래쪽과 메뉴 충돌

Question

테두리 아래 이미지 (화살표, 159px 너비)를 포함하고 싶습니다. 이처럼 다음 <li>는 159px의 폭을 얻을 수

그러나 문제가있다.

국경 이미지를 표현하기 위해 어떤 트릭은 다른 <li> 밀어 않고있다?

LG 전자 cgee

<li>의 코드 :

.sub_menu ul li { 
    float: left; 
    font-family: 'Open Sans',sans-serif; 
    font-weight: bold; 
    height: 41px; 
    margin-right: 20px; 
    margin-top: 10px; 
} 

활성 요소의 코드 :

.sub_menu ul .active { 
    background-image: url("../images/sub_menu_border_active.png"); 
    background-position: center 17px; 
    background-repeat: no-repeat; 
    position: relative; 
    z-index: 100; 
} 

Answer 1

당신이 달성하기위한 몇 가지 가능성이 있습니다 원하는 결과 :

1. li에 min-width: 159px을 추가 할 수 있습니다.
2. li (예 : span)의 요소를 position: absolute 및 bottom: 0과 함께 추가 할 수 있습니다. overflow: visible을 li에 추가해야합니다. 다음은
3. :

CSS는

.sub_menu ul .active { 
    position: relative; 
    z-index: 100; 
    overflow: visible; 
} 

.sub_menu ul .active:after { 
    content: ''; 
    background-image: url("../images/sub_menu_border_active.png"); 
    background-position: center 17px; 
    background-repeat: no-repeat; 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    margin-left: -80px; 
    height: ...; 
    width: 159px; 
    z-index: 101; 
}