CSS tab menu issue

Question

this is the Javascript part:

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("ul#tabs li").click(function(e){
        if (!jQuery(this).hasClass("active")) {
            var tabNum = jQuery(this).index();
            var nthChild = tabNum+1;
            jQuery("ul#tabs li.active").removeClass("active");
            jQuery(this).addClass("active");
            jQuery("ul#tab li.active").removeClass("active");
            jQuery("ul#tab li:nth-child("+nthChild+")").addClass("active");
        }
    });
});
</script>

This is the CSS part:

ul#tabs {
    list-style-type: none;
    padding: 0;
    border: 1px solid #F2F2F2;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
}
ul#tabs li {
    display: inline-block;
    padding: 10px 15px;
    border-right: 1px solid #F2F2F2;
    cursor: pointer;
    color: #A5A5A5;
}
ul#tabs li:hover {
    /*background-color: #238b68;*/
    color: #BA1707;
}
ul#tabs li.active {
    margin: 0px 0px -1px;
    color: #BA1707;
    /*background-color: #238b68;*/
}
ul#tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul#tab li {
    display: none;
}
ul#tab li.active {
    display: block;
}

And finally this is the HTML part:

<div class="tabmenu">
            <ul id="tabs">
                <li class="active">Description</li>
                <li>Reviews</li>
                <li>Ask a question</li>
            </ul>
            <ul id="tab">
                <li class="active">
                    <div class="product-attributes">
                        <?php echo $this->getChildHtml('attributes');?>
                    </div> 
                </li>
                <li>
                    <?php echo $this->getChildHtml('review_block');?>
                </li>
                <li>
                    <div class="support_box">
                        <?php echo $this->getChildHtml('product.support') ?>
                    </div> 
                </li>
            </ul>
        </div>

You can see the result in the Fiddle

BUT, my problem is when a tab is active I want to clear off the border-bottom below. How can I do that? Thanks in advance.

[UPDATE] This is how I want to look like:. There is a black bottom line. I want it . The rest is all good

Answer 1

Here's a solution utilising z-index to essentially cover the bottom border of the UL with a white border on the active LI:

ul#tabs li {
  position: relative;
  z-index: 5;
  display: inline-block;
  padding: 10px 15px;
  border-right: 1px solid #F2F2F2;
  cursor: pointer;
  color: #A5A5A5;
}

There is also a problem with the whitespace between the LI elements, hence the comment tags in the HTML to remove those pesky spaces, which otherwise caused problems with the width of the borders.

<ul id="tabs">
  <li class="active">Description</li><!--
  --><li>Reviews</li><!--
  --><li>Ask a question</li>
</ul>

Fiddle: https://jsfiddle.net/mn3g8u9a/