Затухание фона и меню навигации становятся все в порядке друг друга

Question

мой клиент хочет получить затухающее фоновое изображение прямо под горизонтальной выпадающей навигационной панелью; проблема заключается в том, что когда вы нажимаете на меню навигации, любой из выпадающих элементов, находящихся в том же месте, что и область затухания фона, они становятся скрытыми от изображения. Есть ли способ сохранить элементы навигации на фоне затухания?

я не могу показать его здесь, потому что страница говорит, что я должен иметь по крайней мере 10 сообщений, чтобы разместить изображение, так как я впервые на сайте, но вы можете проверить его здесь в действии - http://metroanimalshelter.org/testredesigns2.html

Answer 1

Вы должны дать вашей навигационной панели значения z-index, чтобы вытащить его выше ваш другой контент:

#ajonav { 
    position: relative; 
    z-index: 1; 
} 

Answer 2

Да, есть атрибут стиля под названием Z-индекс. Вы установили одну из html-форм, чтобы иметь z-index: -1, а другой z-index: 1, а один с 1 всегда будет сверху.

Answer 3

Sorry Moob; the CSS is on a separate sheet; here u go : 
html, body { 
background-color: #000000; 
margin: 0px; 
font-family: Verdana, Geneva, Arial, sans-serif; 


font-size: small; 
line-height: 140%; 
background-color: #000000; } 




#maincont 
{ 
     width:95%; 
     margin:auto ; 

padding:0px; 
     text-align:left; background-color:#000000; 

border:0px solid black; 

} 



#dbtech 
{ 
    font-size:8px; 
    width:100%; 
    text-align:center; 
} 


#logo 
{ 
    background-color: #6A9DFF; float:left; 
    width:100%;; 
    height:98px; 
    min-height:98px; 
} 


#reloctext 
{ 
    padding:2%; 
    text-align:justify; 

font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-size:12px; 
} 


#reloctext ul li 
{ 
    text-align:left; 
} 


#reloclogo 
{ 
    float:right; 
    padding:3% 2% 2% 2%; 
} 



#scroller 
{ 
    float:left; 
} 


#erc{ 
    float:right; 
    padding:2%; 
} 


#blurb{ 
    padding-bottom:2.5%; 
} 




#datebar 
{ 
    float:left; 
    background:#32aa1e url(http://i790.photobucket.com/albums/yy181/BirdmansArt/TuscAnimShelter/datebarimage-1.jpg); 

    color:#000000; 
    font-weight:bold; 

    text-align:center; 
    width:100%; 
    border-bottom:1px solid black; 
     display: inline; 
} 


#datebar a 
{ 
    color:#FFFFFF; 
    text-decoration:none; 
} 

#datebar a:hover {color : #F7DE0D; text-decoration: none; } 



#bodytext 
{ 
    float: left; 
    width:98%; 
    padding:0% 1% 0% 1%; 

    background-color:#000000; 

} 


#bodytext2{ 
    float: left; 
    width:90%; 
    padding:0% 1% 0% 5%; 

    background-color:#000000; 

} 


div.left 
{ 
float:left; 
width:20%; 
padding: .5em; 
border:0px ; 
background: #4040ff ; 
margin: 0em 3em 0em 0em; 
font-size: 12px; 
text-align: left; 
} 



.heading 
{ 
    font-family:"Comic Sans MS"; 
    font-weight:bold; 
    color:#0000FF; 
} 

.headingtwo 
{ 
    font-family:"Comic Sans MS"; 
    font-weight:bold; 
font-size: 1.5em; color:#1651CA; 
width: 95%;} 


.headingnav 
{ 
    font-family:"Comic Sans MS"; 
    font-weight:bold; 
    color:#0017a6; 
} 


.ital 
{ 
    font-size: .8em; 
    font-style:italic; 
} 


#trpic 
{ 
    float:right; 
    padding:2% 0% 0% 1%; 
} 


#trpic img 
{ 
    border:1px solid black; 
} 



.rimg{ 

    float:right; 
    padding:0% 0% 0% 1%; 
} 




.limg{ 

    float:left; 
    padding:0% 2.4% 0% 0%; 
} 



#banner 
{ 
    border:1px solid black; 
} 



#hours 
{background: url(http://i790.photobucket.com/albums/yy181/BirdmansArt/TuscAnimShelter/bgforsite.jpg) no-repeat; font-family:Verdana, Arial, Helvetica, sans-serif; 

    font-size:14px; 
    text-align:center;} 


#rightbar{background-color:#0066cc; height:100%; float:left; width:20%;} 






#bottom a 
{ 
    color:#FFFFFF;} 

/* 
/********************* CSS For Navigation Menu *********************/ 
/* CSS Popout Menu */ 


#ajonav{margin: auto;width: 90%; 
position: relative; 
z-index: 50; 
} 
/* 
****************************************************** 
*Design the main ul 
****************************************************** 
*/ 
#ajonav ul { 
position: relative; 
background-color: #a01013; 
padding: 0 0px; 
list-style: none;/*To remove the bullets*/ 
} 
display: inline-block; 
} 

/* 
************************************ 
*Design the main ul li 
************************************ 
*/ 
#ajonav ul li { 
float: left; 
border-right: 1px solid #a01013; 
} 
#ajonav ul li:hover { 
background-color: #a01013; 
} 
#ajonav ul li:nth-child(5){border-right:none; } 


#ajonav ul li:hover a { 
    color: #efb009; 
} 

#ajonav ul li a { 
    color: #E4E4E4; 
    text-decoration: none; 
    padding: 10px 10px; 
    display: block; 
    font-family: sans-serif,serif; 
} 


/* 
************************************ 
*(Dropdown) Design the sub ul li 
************************************ 
*/ 
/* 
****************************************************** 
*Hide the submenu ul at start 
****************************************************** 
*/ 
#ajonav ul ul{visibility:hidden;display: none;} 
/* 
****************************************************** 
*Show the submenu when li gets hover 
****************************************************** 
*/ 
#ajonav ul li:hover > ul { 

visibility:visible;display: block;} 
#ajonav ul ul { 
position: absolute; 
background-color: #a01013; 
padding: 0px; 

} 

#ajonav ul ul li { 
    position: relative; 
    float: none; 
    border-top: 1px solid #727272; 
} 

#ajonav ul ul li a { 
    padding: 15px 20px; 
    color: #fff; 
} 

#ajonav ul ul li a:hover { 
color: #ffffff; 
    background-color: #a01013; 
} 


#info 
{border-collapse: collapse; 
width: 100%; 
background: url(http://i790.photobucket.com/albums/yy181/BirdmansArt/TuscAnimShelter/Infobg-1.jpg); 
-moz-border-radius: 40px 40px 48px 48px} 

#info,#info th, #info td 
{ border:3px solid color:#000000; 

} 

#info th 
{height: 35px; background:#6B9CFF url(http://i790.photobucket.com/albums/yy181/BirdmansArt/TuscAnimShelter/AdditionalInfoShelterBg-2.jpg); text-align:center; 
} 

#info td 
{text-align: left; 
padding:3%; 

} 










/* fade slider */ 
.slides { 
    height:300px; 
    margin:50px auto; 
    overflow:hidden; 
    position:relative; 
} 
    width:900px; 
} 
.slides ul { 
    list-style:none; 
    position:relative; 


} 

/* keyframes #anim_slides */ 
@-webkit-keyframes anim_slides { 
    0% { 
     opacity:0; 
    } 
    6% { 
     opacity:1; 
    } 
    24% { 
     opacity:1; 
    } 
    30% { 
     opacity:0; 
    } 
    100% { 
     opacity:0; 
    } 
} 
@-moz-keyframes anim_slides { 
    0% { 
     opacity:0; 
    } 
    6% { 
     opacity:1; 
    } 
    24% { 
     opacity:1; 
    } 
    30% { 
     opacity:0; 
    } 
    100% { 
     opacity:0; 
    } 
} 

.slides ul li { 
    opacity:0; 
    position:absolute; 
    top:0; 

    /* css3 animation */ 
    -webkit-animation-name: anim_slides; 
    -webkit-animation-duration: 24.0s; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-direction: normal; 
    -webkit-animation-delay: 0; 
    -webkit-animation-play-state: running; 
    -webkit-animation-fill-mode: forwards; 

    -moz-animation-name: anim_slides; 
    -moz-animation-duration: 24.0s; 
    -moz-animation-timing-function: linear; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-direction: normal; 
    -moz-animation-delay: 0; 
    -moz-animation-play-state: running; 
    -moz-animation-fill-mode: forwards; 
} 

/* css3 delays */ 
.slides ul li:nth-child(2), .slides ul li:nth-child(2) div { 
    -webkit-animation-delay: 6.0s; 
    -moz-animation-delay: 6.0s; 
} 
.slides ul li:nth-child(3), .slides ul li:nth-child(3) div { 
    -webkit-animation-delay: 12.0s; 
    -moz-animation-delay: 12.0s; 
} 
.slides ul li:nth-child(4), .slides ul li:nth-child(4) div { 
    -webkit-animation-delay: 18.0s; 
    -moz-animation-delay: 18.0s; 
} 
.slides ul li img { 
    display:block; 
} 

/* keyframes #anim_titles */ 
@-webkit-keyframes anim_titles { 
    0% { 
     left:100%; 
     opacity:0; 
    } 
    5% { 
     left:10%; 
     opacity:1; 
    } 
    20% { 
     left:10%; 
     opacity:1; 
    } 
    25% { 
     left:100%; 
     opacity:0; 
    } 
    100% { 
     left:100%; 
     opacity:0; 
    } 
} 
@-moz-keyframes anim_titles { 
    0% { 
     left:100%; 
     opacity:0; 
    } 
    5% { 
     left:10%; 
     opacity:1; 
    } 
    20% { 
     left:10%; 
     opacity:1; 
    } 
    25% { 
     left:100%; 
     opacity:0; 
    } 
    100% { 
     left:100%; 
     opacity:0; 
    } 
} 

.slides ul li div { 
    background-color:#000000; 
    border-radius:10px 10px 10px 10px; 
    box-shadow:0 0 5px #FFFFFF inset; 
    color:#FFFFFF; 
    font-size:26px; 
    left:10%; 
    margin:0 auto; 
    padding:20px; 
    position:absolute; 
    top:50%; 
    width:200px; 

    /* css3 animation */ 
    -webkit-animation-name: anim_titles; 
    -webkit-animation-duration: 24.0s; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-direction: normal; 
    -webkit-animation-delay: 0; 
    -webkit-animation-play-state: running; 
    -webkit-animation-fill-mode: forwards; 

    -moz-animation-name: anim_titles; 
    -moz-animation-duration: 24.0s; 
    -moz-animation-timing-function: linear; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-direction: normal; 
    -moz-animation-delay: 0; 
    -moz-animation-play-state: running; 
    -moz-animation-fill-mode: forwards; 
} 









#bottom2 a 
{ 
    color:#FFFFFF;} 

/* 
/********************* CSS For Navigation Menu *********************/ 
/* CSS Popout Menu */ 


#ajonav2{margin: auto;width: 90%;} 
/* 
****************************************************** 
*Design the main ul 
****************************************************** 
*/ 
#ajonav2 ul { 
background: url(http://i790.photobucket.com/albums/yy181/BirdmansArt/TuscAnimShelter/BG2015_zpsf8c31554.jpg); 
padding: 0 0px; 
list-style: none;/*To remove the bullets*/ 
position: relative; 
display: inline-block; 
} 

/* 
************************************ 
*Design the main ul li 
************************************ 
*/ 
#ajonav2 ul li { 
float: left; 
border-right: 1px solid #a01013; 
} 
#ajonav2 ul li:hover { 
background: url(http://i790.photobucket.com/albums/yy181/BirdmansArt/TuscAnimShelter/BG2015_zpsf8c31554.jpg); 
} 
#ajonav2 ul li:nth-child(5){border-right:none; } 


#ajonav2 ul li:hover a { 
    color: #efb009; 
} 

#ajonav2 ul li a { 
    color: #E4E4E4; 
    text-decoration: none; 
    padding: 10px 10px; 
    display: block; 
    font-family: sans-serif,serif; 
} 


/* 
************************************ 
*(Dropdown) Design the sub ul li 
************************************ 
*/ 
/* 
****************************************************** 
*Hide the submenu ul at start 
****************************************************** 
*/ 
#ajonav2 ul ul{visibility:hidden;display: none;} 
/* 
****************************************************** 
*Show the submenu when li gets hover 
****************************************************** 
*/ 
#ajonav2 ul li:hover > ul {visibility:visible;display: block;} 
#ajonav2 ul ul { 
position: absolute; 
background: url(http://i790.photobucket.com/albums/yy181/BirdmansArt/TuscAnimShelter/BG2015_zpsf8c31554.jpg); 
padding: 0px; 
} 

#ajonav2 ul ul li { 
    position: relative; 
    float: none; 
    border-top: 1px solid #727272; 
} 

#ajonav2 ul ul li a { 
    padding: 15px 20px; 
    color: #fff; 
} 

#ajonav2 ul ul li a:hover { 
color: #ffffff; 
    background: url(http://i790.photobucket.com/albums/yy181/BirdmansArt/TuscAnimShelter/BG2015_zpsf8c31554.jpg); 
} 


a:link {color : #B71F1F ;} 
a:visited {color : #800080; text-decoration : none;} 
a:hover {color : #F7DE0D; text-decoration: none;} 
a:active {color : #000000;}