How to remove the line which under the test text

the following image is the original blueprint.

according to the designing. i used it in my site. but i don’t know how to remove the line which under the test text .maybe the hover background image that i sliced is wrong or the css i wrote is not right. if those are wrong. how to slice it and correct it? thank you

test test

I usually make the tabs all about 2px taller than needed with the current tab having a gradient than can rub out the line underneath and merge into the background of the bar below.

The bar below can be overlapped by 2px with so that the extra 2px is hidden behind the bar. On hover you change the z-index of the tab (and the current tab) so that the tab sits in front and makes a seamless join.

If you add this code you can see the effect:


.nav-top ul li {
  position: relative;
  top: 2px;
  z-index: 1;
}
.nav-inner {
  position: relative;
  z-index: 2;
}
.nav-top ul li.navahead a:hover,
 .nav-top ul li.current,
 .nav-top ul li.navahead:hover {
  z-index: 99;
}

You may want to make the tabs 2px taller but the above is working.

you ways works like a charm. gorgeous. many thanks.Paul O’B

Paul O’B, what’t the code meaning? why your using the position: relative; and z-index. .nav-top ul li.navahead:hover thank you

The position:relative is added so that you can control how elements overlap. Only positioned elements can have a z-index applied. I also moved the top tabs by 2px using relative positioning which moves the top tabs but nothing else on the page moves resulting in the tabs overlappin the horizontal bar.

I overlapped the tabs by 2px so that they sit behind the main bar. Therefore I needed to ensure that the tabs sit behind the bar by default which is why they have a lower z-index than the horizontal bar.

The current tab however needs to be in front of the bar so that it can merge seamlessly with the bar - and also the hover effect needs to come in front of the bar. Consequently on hover and for the current tab we raise the z-index one higher than the bar so that it pops in front of it.

  1. tabs = z-index: 1
  2. menu bar = z-index: 2
    3)current and hovered tabs = z-index: 3

The lower a z-index the further away from you it will appear and the higher a z-index the closer to you it is.

got it ,many thanks, you made me know a lot.