如何强制菜单在三角边框后面

Question

如上图所示，有水平菜单，下面是轮播滑块。我想在三角形边框后面制作水平菜单。

我已经完成了：

• 强制margin-top:-10px使旋转木马覆盖水平菜单。

结果如下：

我和z-index一起玩，但它不起作用。 这是代码：

＆＃13;

＆＃13;

/* MENU */

.menu {
	display:block;
	padding:0 10px;
}

.border-segitiga {
	border-style: solid;
	border-width: 8px 0px 0px;
	-moz-border-image: url(../images/dotted.png) 14 13 13 repeat round;
	-webkit-border-image: url(../images/dotted.png) 14 13 13 repeat round;
	-o-border-image: url(../images/dotted.png) 14 13 13 repeat round;
	border-image: url(../images/dotted.png) 14 13 13 repeat round;
	z-index:5;
	margin-top:-12px;
}

nav {
	display:inline-block;
}

nav li {
	display:inline;
	list-style:none;
	font-family:"DINCond-Regular", arial;
	text-transform:uppercase;
}

nav li:after {
	content:"";
	border-right:1px solid #4fb36b;
	padding-right:15px;
	position:relative;
	bottom:3px;
}

nav li:last-child:after {
	border:0;
}

nav li a {
	color:#000;
	display:inline-block;
	text-decoration:none;
	font-size:24px;
	line-height:34px;
	padding:12px;
}

nav li a:hover {
	display:inline-block;
	text-decoration:none;
	font-size:24px;
	line-height:24px;
	background:#ffde00;
	padding:12px;
}

.active {
	background:#ffde00;
	z-index:1;
	position:relative;
}

＆＃13;

<header>
	<div class="menu">
		<nav>
			<li><a class="active" href="index.html">Beranda</a></li>
			<li><a href="berita.html">Berita</a></li>
			<li><a href="profil.html">Profil &amp; Kisah Sukses</a></li>
			<li><a href="regulasi.html">Regulasi</a></li>
			<li><a href="galeri.html">Galeri Foto</a></li>
			<li><a href="agenda.html">Agenda</a></li>
		</nav>
		<div class="search search-header">
			<form action="#" id="search_box">
				<input type="text" value="SEARCH" onfocus="this.value = this.value=='SEARCH'?'':this.value;" onblur="this.value = this.value==''?'SEARCH':this.value;">
				<button type="submit" class="search-button"><img src="images/luv.png" title="Search" /></button>
			</form>
		</div>
	</div>
</header>
<div class="wrapper grey border-segitiga">
	<div class="jcarousel-wrapper">
		slide content
	</div>
</div>      

＆＃13;

＆＃13;

＆＃13;

最好的方法是什么。 感谢您的推荐。

Answer 1

你检查了索引吗？这段代码会将三角形类放在最上面，可以说是在菜单类上编入索引。

  <div class="menu"><div class="triangle"></div></div>

没有任何代码，很难得到一个想法，但以这种方式使用div会将内部div放在事物索引的顶部或第一位。