Help please: template menu is not fading behind popupwindow

[klufley]

Hello,

The photo below best describes what is going on. As you can see all of the elements of the template I am using is fading out and falling behind my Phoca gallery except for my top menu bar. My guess is that there is an incorrect setting in the template.css file as the problem is fixed if I apply the default beez template. Also attached is the template.css file

.

CSS CODE:

/** Hornav **/

#hornav{clear:both; display:block; list-style:none outside none; float:left; margin:8px 0px 0 0; padding:5px 0 0 36px; width:670px; z-index:99999;}

#hornav .moduletable{margin:0;}
#hornav a {color:#a1a1a1; cursor:pointer; display:block; font-size:12px; font-weight:normal; text-decoration:none; white-space:nowrap;}
#hornav a span {cursor:pointer; display:block;}
#hornav li{list-style:none outside none; position:relative;z-index:99999 !important; text-indent:0; margin:0; padding:0 !important;}
#hornav li li a span, #hornav li li a:hover span {background: none repeat scroll 0 0 transparent !important; cursor:pointer; display:block; padding:0;}
#hornav a:hover {cursor:pointer; display:block; text-decoration:none;}
#hornav a:hover span{cursor:pointer; display:block;}
#hornav li ul li, #hornav li ul li ul li {margin-top: 0px;}

/* Hornav - Parent Styling */
#hornav ul a, #hornav ul ul a, #hornav .separator {white-space:nowrap; color:#3A3A3A; font-size:14px; font-weight:normal; line-height:22px; margin:0; text-shadow:none; background:url("../images/menu_sep.png") no-repeat scroll 0% 50% transparent; margin-bottom:10px;}
#hornav li:first-child a {background-image:none !important;}
#hornav li {background: none repeat scroll 0 0 transparent; float:left; padding:0; z-index:99999 !important;}
#hornav li li a, #hornav .separator {font-weight:normal; overflow:hidden; padding:4px 8px; text-align:left; text-indent:0; z-index:9999 !important;}
#hornav ul a, #hornav .separator {display:block; padding: 4px 14px; text-decoration: none; z-index: 99999 !important;}
#hornav ul ul a {font-size:13px; margin:0px; background-image:none;}

#hornav li:hover {border-bottom:1px solid #aaa;}
#hornav ul ul a {display:block; padding: 1px 10px; text-decoration: none; z-index: 99999 !important; border-color:#aaa;}

/* Hornav - Child Block Styling */
#hornav li li, #hornav li li li {background: none; clear:left; float:left; margin:0; padding: 0px 0px 4px !important; white-space: nowrap; z-index: 9999 !important;}

/* Hornav - Child Link Hover Styling */
#hornav ul a:hover, #hornav ul ul a:hover {color:#888; font-weight:normal; text-decoration:none;}
#hornav li li:hover {border-bottom:0px solid #aaa;}

/* Hornav - Dropdown Block Styling */
#hornav ul li ul{background-color: #eee; -moz-border-radius:0px 0px 5px 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; border-radius:5px 5px 5px 5px; -moz-box-shadow:1px 1px 3px #555; -webkit-box-shadow:1px 1px 3px #555; box-shadow:1px 1px 3px #555; border:1px solid; border-color:#fff; height:auto; left:-999em; margin:0; padding:5px 5px 0px 5px; position:absolute; width:180px; z-index:99999 !important}

/* Hornav - Image 16*16 Styling */
#hornav ul li ul img {padding:3px 6px 3px 0px;}

/* Hornav - Sub-Child Block Styling */
#hornav li ul li ul {-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; height:auto; left:-999em; margin: -7px 0 0; padding:5px; position:absolute; top:0;}

/* Hornav - General */
#hornav li.active ul li a, #hornav li.active ul li, #hornav li.active ul li a:hover, #hornav li.active ul li.hover #hornav li.active ul li.iehover {background-image: none;}
#hornav li:hover ul ul, #hornav li:hover ul ul ul, #hornav li:hover ul ul ul ul, #hornav li.iehover ul ul, #hornav li.iehover ul ul ul, #hornav li.iehover ul ul ul ul {left: -999em;}
#hornav li:hover ul, #hornav li li:hover ul, #hornav li li li:hover ul, #hornav li li li li:hover ul, #hornav li.iehover ul, #hornav li li.iehover ul, #hornav li li li.iehover ul, #hornav li li li li.iehover ul {left:0; z-index:99999 !important;}
#hornav li li, #hornav li li li {min-width: 180px;}
#hornav li ul li ul {margin-left: 187px;}
#hornav li li:last-child, #hornav li li li:last-child {}
#menu li li.parent {cursor: pointer !important;}
#hornav li:hover {left:0; z-index:5001 !important;}
#hornav ul li ul {margin-top: 0px;}

Ive been learning my way around Joomla for the past few weeks and so far I've been managing on my own just fine although this problem I think is beyond me as I am still new to css. Thanks in advance for any tips!



Regards, Marty

[klufley]

Nevermind, figured it out

[bxsljp]

Hi, i've the same problem... can you tell me how do you solve it? Thanks

[klufley]

the z-index of the hornav component was incorrect. Check your z-index of each container, it may not be layered correctly the hornav component (the menu bar) had a higher z-index than the video overlay.

[bxsljp]

Thank you