problem with getting z-index to work

i am trying to create a sub navigation which is followed by seperator line (div with a bot开发者_高级运维tom border) which acts as a visual cue.

but the line is appearing below the menu items. not sure how to get it right

http://jsbin.com/ijewi4

---

not sure about what you want to achieve but if you want to make the div "sit exactly at the bottom of the button tabs":

http://jsbin.com/ijewi4/3

---

I don't really like the hr element, i always use a div with a border-bottom.

That may work for you too.