• Locked
2 replies [Last post]
Wed, 2013-03-06 16:53
RobMichaelson
RobMichaelson's picture
Offline
newbie
Last seen: 9 years 47 weeks ago
Timezone: GMT-8
Joined: 2013-02-22
Posts: 7
Points: 10

Hello

I have tried every version of z-indexing this damn thing... tried zindex on the menu on the slideshow - the wrapper.. uggg, everything. if I fix it for IE it ruins FF etc.

on my test site - http://test.callison.com/ the submenu falls behind the slideshow in IE - when I put the #main at zindex -1 the submenu worked but the slideshow was gone in FF. I tried putting the whole menu at 1000 even - nothing...

any help is greatly appreciated

Rob

Top
Tags:
Wed, 2013-03-06 20:54
#1
RobMichaelson
RobMichaelson's picture
Offline
newbie
Last seen: 9 years 47 weeks ago
Timezone: GMT-8
Joined: 2013-02-22
Posts: 7
Points: 10

got it

got it

Top
Sun, 2013-03-31 07:01
#2
kaoolo
kaoolo's picture
Offline
newbie
USA
Last seen: 9 years 43 weeks ago
USA
Timezone: GMT-5
Joined: 2013-03-31
Posts: 1
Points: 1

I do have the same problem

Hey RobMichaelson,

Have you fixed your problem? what do you mean by got it?

Please take a look at this page. I need to have 2 menus, one above the other. You can see how the top menu falls behind the bottom menu.
I need to keep it on top

Need help

CSS Code

#nav{
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
 
    float:left;
    width:100%;
   z-index:1000; /* This makes the dropdown menus appear above the page content below */
   position:relative;
}
#nav li{
    float:left;
    margin-right:10px;
    position:relative;
}
#nav a{
    display:block;
    padding:5px;
    color:#fff;
    background:#FF8C00;#333;
    text-decoration:none;
}
#nav a:hover{
    color:#fff;
    background:#6b0c36;
    text-decoration:underline;
}
 
 
#nav ul{
    background:#fff; 
    background:#ccccff;rgba(255,255,255,0); 
    list-style:none;
    position:absolute;
    left:-9999px; 
 
}
#nav ul li{
    padding-top:1px; 
    float:none;
}
#nav ul a{
    white-space:nowrap; 
}
#nav li:hover ul{
    left:0;
}
#nav li:hover a{ 
    background:#6b0c36;
    text-decoration:underline;
}
#nav li:hover ul a{ 
    text-decoration:none;
}
#nav li:hover ul li a:hover{ 
    background:#333;
}

#nav ul{
background:#fff;
background:#ccccff;rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;

}

#nav ul li{
padding-top:1px;
float:none;
}
#nav ul a{
white-space:nowrap;
}
#nav li:hover ul{
left:0;
}

#nav li:hover a{
background:#6b0c36;
text-decoration:underline;
}

#nav li:hover ul li a:hover{
background:#333;

}

Body code

<ul id="nav">
    <li>
        <a href="#">Home</a>
    </li>
 
    <li>
        <a href="#">About</a>
        <ul>
            <li><a href="#">The product</a></li>
 
            <li><a href="#">Meet the team</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Services</a>
 
        <ul>
            <li><a href="#">Sevice one</a></li>
            <li><a href="#">Sevice two</a></li>
 
            <li><a href="#">Sevice three</a></li>
            <li><a href="#">Sevice four</a></li>
        </ul>
 
    </li>
    <li>
        <a href="#">Product</a>
        <ul>
            <li><a href="#">Small product (one)</a></li>
 
            <li><a href="#">Small product (two)</a></li>
            <li><a href="#">Small product (three)</a></li>
            <li><a href="#">Small product (four)</a></li>
 
            <li><a href="#">Big product (five)</a></li>
            <li><a href="#">Big product (six)</a></li>
            <li><a href="#">Big product (seven)</a></li>
 
            <li><a href="#">Big product (eight)</a></li>
            <li><a href="#">Enourmous product (nine)</a></li>
            <li><a href="#">Enourmous product (ten)</a></li>
 
            <li><a href="#">Enourmous product (eleven)</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Contact</a>
 
        <ul>
            <li><a href="#">Out-of-hours</a></li>
            <li><a href="#">Directions</a></li>
 
        </ul>
    </li>
</ul>

Top
  • Locked