활성 메뉴 탭의 경계선을 제거하는 방법

Question

현재 페이지 탭 (활성 탭)에 대해서만 경계선을 제거하고 싶습니다. border-bottom : none; 도움이되지 않습니다. 나는 Z-index도 사용하지 않으려 고 노력했습니다. Pls는 help.Thanks.You 여기 사이트를 살펴 걸릴 수 있습니다 : http://ymm.valse.com.my/main/news

CSS를

/* Main */ 
.sf-menu { 
    width: 100%; 
    margin: 0; 
    list-style: none; 
    background-color: #2D2D2D; 
    /*border-bottom:6px solid #393939;*/ 
    z-index: 90; 
    /*background-image: linear-gradient(#444, #111);*/ 


    /*border-radius: 50px;*/ 
    /* box-shadow: 0 2px 1px #9c9c9c;*/ 


} 

.sf-menu li { 
    float: left; 
    /*padding: 10px 0;*/ 
    margin: 0 0 0 2px; 
    position: relative; 
    box-shadow: 1px 0 #222222, 
       2px 0 #383838; 
    border-bottom:4px solid #393939; 
    z-index: 90; 
} 
.sf-menu li a{ 
    display:block; padding: 10px 25px; height: 40px;color:#DDDDDD; 
} 
.sf-menu li a.active 
{ 
    border-bottom:none; 
} 
.sf-menu a.active{margin-top:-5px; padding-top: 15px;z-index: 100;background-color:#072438;}/*removed height: 51px;*/ 

.sf-menu li a 
.sf-menu a { 
    float: left; 
    height: 20px; 
    padding: 0 25px; 
    color: #DDDDDD; 
    /* text-transform: uppercase;*/ 
    font: bold 12px/25px Arial, Helvetica; 
    text-decoration: none; 
    text-shadow: 0 1px 0 #000; 
} 


.sf-menu li:hover > a { 
    color: #fafafa; 
} 

*html .sf-menu li a:hover { /* IE6 */ 
    color: #fafafa; 
} 

.sf-menu li:hover > ul { 
    display: block; 
} 
/*.sf-menu li:last-child{ 
    box-shadow: none; 
}*/ 
.sf-menu li:nth-child(6){ 
    box-shadow: none; 
} 

/* Sub-menu */ 
.sf-menu ul { 
    list-style: none; 
    margin: 0; 
    padding: 0;  
    display: none; 
    position: absolute; 
    top: 35px; 
    left: 0; 
    z-index: 99999;  
    background-color: #2D2D2D; 
    border-bottom:none; 
    /* background-image: linear-gradient(#444, #111); */ 
    /*-moz-border-radius: 5px;*/ 
    /*border-radius: 5px;*/ 

} 

.sf-menu ul li { 
    float: none; 
    margin: 0; 
    padding: 0; 
    display: block; 
    box-shadow: 0 1px 0 #222222, 
       0 2px 0 #383838; 
    border-bottom:none; 
} 


.sf-menu ul a {  
    padding: 10px; 
    height: auto; 
    line-height: 1; 
    display: block; 
    white-space: nowrap; 
    float: none; 
    text-transform: none; 
} 
.sf-menu ul a:hover{ 
    margin-left:10px; 
} 
*html .sf-menu ul a { /* IE6 */ 
    height: 10px; 
    /*width: 150px;*/ 
    width:auto; 

} 


*:first-child+html .sf-menu ul a { /* IE7 */  
    height: 10px; 
    /*width:150px*/ 
    width: auto; 


} 
/* active menu*/ 


     /*end */ 
.sf-menu ul a:hover { 
    /*background-color: #0186ba; 
    background-image: linear-gradient(#04acec, #0186ba);*/ 

} 

.sf-menu ul li:first-child a { 
    /*border-radius: 5px 5px 0 0;*/ 

} 



.sf-menu ul li:first-child a:after { 
    content: ''; 
    position: absolute; 
    left: 30px; 
    top: -8px; 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 8px solid #072438; 

} 

.sf-menu ul li:first-child a:hover:after { 
    border-bottom-color: #072438; 

} 

.sf-menu li:last-child a { 
    /*border-radius: 0 0 5px 5px;*/ 

} 

/* Clear floated elements */ 
.sf-menu:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
} 


* html .sf-menu    { zoom: 1; } /* IE6 */ 
*:first-child+html .sf-menu { zoom: 1; } /* IE7 */ 

스크립트

<script type="text/javascript"> 
var path = window.location.pathname.split('/'); 
path = path[path.length-1]; 
if (path !== undefined) { 
    $("ul.sf-menu") 
    .find("a[href$='" + path + "']") // gets all links that match the href 
    .parents('li') // gets all list items that are ancestors of the link 
    .children('a') // walks down one level from all selected li's 
    .addClass('active'); 
    //document.styleSheets[0].insertRule('a:active { background-color: red; }', 0); 
} 
</script> 

Answer 1

활성 클래스와 리 요소의 경계 설정 :

를

.sf-menu li.active { 
    border-bottom: none; 
} 


<script type="text/javascript"> 
var path = window.location.pathname.split('/'); 
path = path[path.length-1]; 
if (path !== undefined) { 
    $("ul.sf-menu") 
    .find("a[href$='" + path + "']") // gets all links that match the href 
    .parents('li') 
    .addClass('active'); 
//document.styleSheets[0].insertRule('a:active { background-color: red; }', 0); 
} 
</script> 

Answer 2

anchor 태그가 아닌 li에 .active 클래스를 추가해야합니다. 그런 다음 활성 li의 경계를 타겟팅 할 수 있습니다.