CODEWITHSUNDEEP
jquerycss
oshirowanen
oshirowanen

Reputation: 15965

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 applying the bottom border of the navigation with a white colour. For some reason, it is not working.

Any ideas why?

Upvotes: 1

Views: 1971

Answers (2)

Sotiris
Sotiris

Reputation: 40096

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/

Upvotes: 1

Ian Wood
Ian Wood

Reputation: 6573

Something like: this effort

Upvotes: 1

Related Questions