褪色背景＆amp;导航菜单正在以其他方式进入

Question

我的客户想在水平下拉导航栏下方放置一张褪色的背景图片;问题是，当您单击导航菜单时，与淡入淡出的背景区域位于同一位置的任何下拉项目都会被图像隐藏。有没有办法让导航项保持在褪色的背景之上？

我无法在此处显示，因为该页面显示我必须至少有10个帖子才能发布图片，因为我是该网站的新用户，但您可以在此处查看 - { {3}}

Answer 1

是的，有一个名为z-index的样式属性。您将其中一个html表单设置为z-index：-1，另一个为z-index：1，而将1设置为始终位于顶部。

Answer 2

您需要为导航栏添加z-index值，使其高于其他内容：

#ajonav {
    position: relative;
    z-index: 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;}