如何删除活动菜单选项卡的边框底部

Question

我希望只为当前页面选项卡（活动选项卡）删除边框底部。我使用了 border-bottom:none; help.I 没有尝试 z-index 也无济于事。请 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

在 li 元素上设置活动 class 和边框 :

.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

您应该将 .active class 添加到 li，而不是锚标记。然后就可以在active li上定位border了。

如何删除活动菜单选项卡的边框底部

how to remove the border-bottom for the active menu tab

css

jquery