Question: I Have a simple menu, it's on the left part of the page. the left part CSS, says on the right, give border.

Code:

```
#solutions .navbar_left{
    position: relative;
    float:left;
    width: 28.45982142857143%;
    height:auto;
    border-right: 2px solid #442a19;
}

```

when I click on my menu there, I want the line to break where I click

Where the minus is, Right brown border should break and give it white background/transparent
--------------------------------------------------------------------------------------------

, I want it to be transparent.. only on that part. I do have active class for that navbar.
I'm adding a photo for a better example.

![Example](https://i.stack.imgur.com/LVlza.png)

As you can see, on the bottom I added the example (on the code it shows complete line), where the minus on the navbar, I want the white space!... is it possible?

Adding [JsFiddle](http://jsfiddle.net/uwssexv6/) for better understanding of the problem.

Thanks ahead.

Answer: 
something like this?

HTML:

```
<div class="navbar_left">
<h1>Our Solutions</h1>
<div class="Solutions">
    <div>
        <span>Solution 1</span>
        <div class='break_line'></div>
    </div> 
    <div>
        <span>Solution 2</span>
        <div class='break_line'></div>
    </div>
    <div>
        <span>Solution 3</span>
        <div class='break_line'></div>
    </div> 
</div>

```

CSS:

```
.navbar_left
{
    position: relative;
    float:left;
    width: 28.45982142857143%;
    height:auto;
    border-right: 2px solid #442a19;    
}

.Solutions > div
{
    padding: 20px 10px;
    background: #fff;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    position: relative;
}

.Solutions > div.current
{
    background: #fff;
}

.Solutions > div .break_line
{
    display: none;
}

.Solutions > div.current .break_line
{
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 9999;
    width: 2px;
    height: 100%;
    background: inherit;
}

```

Jquery:

```
$(document).ready(function(){
    $('.Solutions > div').click(function(){
        $('.Solutions > div').removeClass('current');
        $(this).addClass('current');
    });    
});

```

example on jsfiddle: <http://jsfiddle.net/2joa40fv/1/>
Position a div that wraps around the navbar item, and set it's position to relative, it's height and width as desired, it's z-index to 5, the navbar item itself to z-index 6, and it's background-color to white. Then, when the navbar item is clicked, set that div to animate to the right. It'll give you control to cover the white line where, when, and how you desire.