Question

我尝试使用子菜单创建菜单，子菜单应该位于主菜单的图片后面但是z索引为负，链接不再起作用。也许你有其他解决方案会很棒，请帮助我。

＆＃13;

$(document).ready(function(){
$("#centeredmenu li:has(ul)").hover(function(){
$(this).find("ul").slideDown();},function(){
$(this).find("ul").hide();});});

＆＃13;

#centeredmenu {
   list-style:none;
   top:0;
   width:100%;
   height:200px;
   background-color:blue;
   background:url(http://s30.postimg.org/z2m19gfun/Menueleiste.png) ;
   background-repeat:no-repeat;
   background-position:center; 
   background-size:100% 100%;
   
   /* Menu font */
   vertical-align: middle;
   text-align:center;

}
.parent {
            position: relative;
            z-index: initial;
			list-style:none;
        }

.child {
            position: relative;
			display:;
            z-index:-1;
        }

/* Top menu items */
#centeredmenu ul {
   margin:0px;
   padding:0px;
   list-style:none;
   float:right;
   position:relative;
   right:50%;
}
   
#centeredmenu ul li {
   margin:0px;
   padding:0px;
   float:left; 
   width:300px; 
   position:relative;
   left:50%;
   
}
#centeredmenu ul li a {
   display:block;
   text-decoration: none;
   margin:0;
   padding:.8em .6em .4em;
   font-size:1em;
   line-height:1em;
   
   /* Top menu items font colour */
   
   color:#fff;
   font-weight: 500;
}

#centeredmenu ul li.active a {
/* Top menu active items font colour */
color:#fff;
font-weight:500;
}
#centeredmenu ul li a:hover {
    /* Top menu items background colour */
	background:;
	/* hover  colour */
text-shadow:#fff 1px 1px 1px;

}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a { 
/* Top menu items background colour */
	background:;
}

/* Submenu items */

#centeredmenu ul ul li:last-child a {-moz-border-radius: 0px 0px 15px 20px;
-webkit-border-radius: 0px 0px 15px 30px;
border-radius: 0px 0px 5px 10px;
box-shadow: 0 8px 2px -2px #000;
}

#centeredmenu ul ul {
   display:none; /* Sub menus are hiden by default */
   position:absolute;
   top:;
   left:0;
   right:auto; /*resets the right:50% on the parent ul */
   width:100%; /* width of the drop-down menus */


}
#centeredmenu ul ul li {
   left:auto;  /*resets the left:50% on the parent li */
   margin:0; /* Reset the 1px margin from the top menu */
   clear:left;

}
#centeredmenu ul ul li a,
#centeredmenu ul li.active li a,
#centeredmenu ul li:hover ul li a,
#centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
   font-size:0.8em;
   line-height:0.8em;
   font-weight:500; /* resets the bold set for the top level menu items */
   text-align:center;  /* text center */
   color:#fff;
   	/* This line is required for IE 6 and below */
   background: rgba(0,0,51); 
   /* The Fallback */
   background:rgba(0,0,51,1);
   width:100%; 
   /* Top menu items background colour */
}
#centeredmenu ul ul li a:hover,
#centeredmenu ul li.active ul li a:hover,
#centeredmenu ul li:hover ul li a:hover,
#centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
   background:; /* Sub menu items background colour */
   	/* hover  colour */
text-shadow:#fff 1px 1px 1px;
}

/* Flip the last submenu so it stays within the page */
#centeredmenu ul ul.last {
   left:auto; /* reset left:0; value */
   right:0; /* Set right value instead */
}

/* Make the sub menus appear on hover */
#centeredmenu ul li:hover ul,
#centeredmenu ul li.hover ul { /* This line is required for IE 6 and below */
   display:block; /* Show the sub menus */
}

＆＃13;

<body>
<div id="centeredmenu" >
<ul class="parent">
		<li><a href="index.html">Startseite</a>
		</li>
		<li class="active"><a href="" class="active">Unser Angebot</a>
			<ul>
				<li class="child"><a href="reitunterricht.html">Reitunterricht</a></li>
                <li class="child"><a href="pferdeausbildung.html">Pferdeausbildung</a></li>
                <li class="child"><a href="pferdepension.html">Pferdepension</a></li>
                <li class="child"><a href="trainer.html">Trainer</a></li>			
                </ul>
		</li>
		<li class="last"><a href="">Kontakt</a>
        <ul>
            	<li class="child"><a href="kontakt.html">So finden Sie uns</a></li>
				<li class="child"><a href="impressum.html">Impressum</a></li>
		</ul>
	</li>
</ul>
</div>
</body>

＆＃13;

Answer 1

使用pointer-events: none;通过背景图片捕捉鼠标事件。请参阅example

/**
 * main menu background
 */
.menu:before {
    content: "";
    background-color: rgba(0,0,111,0.6);
    z-index: 1;
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100px;
}

子菜单（带链接）后面（z索引）主菜单图像

1 个答案: