CODEWITHSUNDEEP
cssdrop-down-menu
Ebrahim Khalil
Ebrahim Khalil

Reputation: 37

css dropdown menu goes under slideshow

I'm creating a css dropdown menu with css3. After that navigation, the page has a slideshow. the problem is when I'm hovering the dropdown menus, it's going under the slideshow, as a result the dropdown items can't be seen.

I don't know where to fix, navigation or slideshow ?

Here is the code for slideshow:

.sp-slideshow {
position: relative;
margin: 10px auto;
width: 100%;
max-width: 1000px;
min-width: 260px;
height: 360px;
color:#000;

Upvotes: 0

Views: 1558

Answers (2)

Marco Geertsma
Marco Geertsma

Reputation: 821

Try adding z-index to both the slideshow wrapper and the menu.

and example would be:

HTML

<div class="nav">

</div>
<div class="content">
  <div class="slider">

  </div>
</div>

CSS

.nav{
  z-index:100;
}

.slider{
  z-index:80;
}

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Hope this helped, Let me know if it didn't.

Cheers Marco.

Upvotes: 1

Kilian Stinson
Kilian Stinson

Reputation: 2394

It's hard to help you, without any markup and just a few lines of CSS, but try to apply z-index to the dropdown menu.

dropdown class or id {
    position: relative or absolute;
    z-index: 1000;
}

Upvotes: 0

Related Questions