CODEWITHSUNDEEP
htmlcss
jQuerybeast
jQuerybeast

Reputation: 14490

Displaying li on top of div? Borders issue

So I'm trying to build something that I made in photoshop.

I'm trying to get the <li> ontop of the border so that it hides the border on the right. (Does that makes sense?)

Here is a fiddle: http://jsfiddle.net/5dksT/ Notice when you hover over the <li>/link, the right border is shown.

How can I fix this so that each li goes ontop and hides the border? Or is there any other solution you would perform?

Thanks

Upvotes: 0

Views: 82

Answers (3)

gilly3
gilly3

Reputation: 91487

Give a right margin -1px, change the right border color to white.

.panel_nav li {
    margin:15px -1px 0 20px;
}
.panel_nav li:hover{
    border-right-color: #fff;
}

http://jsfiddle.net/5dksT/5/

Upvotes: 1

alex
alex

Reputation: 490153

I added to your li...

position: relative; 
right: -1px

(or you could change your margin to 15px -1px 0 20px to pull it 1px to the right.)

...and to your li:hover...

border-right: none;

...and it worked!

jsFiddle.

Upvotes: 0

bcoughlan
bcoughlan

Reputation: 26627

Only tested this on Chrome 12 as I'm not at my dev machine at the moment:

Change this:

.panel_nav li{list-style:none;padding:10px;margin:15px 0 0 20px;}

to:

.panel_nav li{list-style:none;padding:10px;margin:15px -1px 0 20px;}

and to the end of the li:hover (AFTER the "border:" statement or else it will default to #ccc):

border-right: 1px solid #fff;

http://jsfiddle.net/waitinforatrain/5dksT/4/

That sets the right margin to negative 1px

Upvotes: 0

Related Questions