CODEWITHSUNDEEP
javacssmenutransparent
riseagainst
riseagainst

Reputation: 430

Css menu becomes transparent over javascript

I'm trying to implement a css menu in a website, and have run into a problem.

Note: The css is in the file, it's the only thing under The javascript is called http://w.sharethis.com/button/buttons.js and it's defined on the header as well. The menu is called cssmenu.

The problem is, on that css menu, when hovering over contact, the background colors are transparent, and with my limited knowledge on the subject, I really don't know how to fix this. The css menu is not my creation, I found it on the web. I have modified many properties that I knew how, but got stuck there.

Upvotes: 0

Views: 468

Answers (5)

Simon Dragsbæk
Simon Dragsbæk

Reputation: 2399

You have to set a ground zero for your z-index like this

body{position:relative;
z-index:0;}

Then you can give each of your menu's a z-index

.div1{z-index:1;}
.div2{z-index:5;}

Upvotes: 0

supersaiyan
supersaiyan

Reputation: 1730

add z-index:2;

ul.cssmenu, ul.cssmenu ul

in this class and you will get your result :-)

Upvotes: 0

Aessandro
Aessandro

Reputation: 5761

z-index seems to be the right solution, I have just checked now.

However I have also noticed that tabels have been used to build the menu with social icons. I suggest creating a DIV and use CSS to position it where needed.

Upvotes: 0

cowls
cowls

Reputation: 24334

If I understand your problem correctly, the issue is that the menu is positions incorrectly on the z axis.

Try adding something like this to bring it forward on top of the buttons: 

.cssmenum {
    z-index: 1000;
}

Upvotes: 0

froddd
froddd

Reputation: 362

You need to bump up the z-index of the main menu <ul> so it always appears over the ShareThis bar:

ul.cssmenu {
    display: block;
    zoom: 1;
    float: left;
    position:relative; /* allows the z-index to be effective -- http://www.w3.org/wiki/CSS/Properties/z-index */
    z-index:100; /* makes the menu appear above the ShareThis widget */
}

Upvotes: 1

Related Questions