border z-index problem

I have the following script:

http://jsfiddle.net/oshirowanen/59MWq/1/

I am trying to partially hide the top border of the .dropdown by app开发者_StackOverflow中文版lying the bottom border of the navigation with a white colour. For some reason, it is not working.

Any ideas why?

in your jQuery code add this

 $(".navigation").css("position","relative");
 $(".navigation").css("z-index","1");

you have to bring the .navigation bar above the popup using z-index.

Example: http://jsfiddle.net/59MWq/9/

Also try to use a map for css(), like this:

 $(".navigation").css({"border-left":"1px black solid",
                              "padding-left":"9px",
                              "border-top":"1px black solid",
                              "padding-top":"4px",
                              "border-right":"1px black solid",
                              "padding-right":"9px",
                              "background-color":"white",
                              "padding-bottom":"4px",
                              "border-bottom":"1px white solid",
                              "position":"relative",
                              "z-index":"1"}); 

Example: http://jsfiddle.net/59MWq/10/

Something like: this effort