CODEWITHSUNDEEP
htmlcss
CodeName44
CodeName44

Reputation: 49

Dropdown Menu goes underneath image

Today I encountered a weird experience in my site LiveGreen

When I hover on the Menu Services, the dropdown goes underneath the image section below that. I tried every possible way like positioning and z-index ing and all kind, and googled a lot, am not bad with HTML and CSS still, it is testing me.

This theme is purchased, so cant post the code. you can check it from the website itself.

Please Help me.

Upvotes: 0

Views: 775

Answers (2)

IMI
IMI

Reputation: 2469

Remove the z-index property on your .main class.

.main {
  z-index: 1; /* this is causing your problems */
}

Upvotes: 3

Joseph Marikle
Joseph Marikle

Reputation: 78520

It's fairly difficult to pull off because there are so few unique classes to key off of. The root cause of the issue for you is that the element with a z-index that is higher than your menu applies that z-index higher up the DOM tree which makes it render on top. The best I could come up with is to apply the following, provided that the #aq-block-8801-5 block is always and will always be the nav menu container.

#aq-block-8801-5 {
  position: relative;
  z-index: 2;
}

Upvotes: 0

Related Questions