ナビゲーションメニューのサブメニューが消える

突然の質問失礼いたします。

マテリアル2を利用しているのですが、ヘッダーの下にナビゲーションメニューをcssのみで設置したのですが、サブメニューが１つしか表示されません。

パンくずリストの上部で消えてしまい、２つ目以降は全く表示されず、試しにヘッダーの下全て消してみても２つ以降は表示されないのは何が原因何でしょうか？

/* ナビゲーションメニュー */
/* 子を持つ親メニューにマウスオーバーしたとき、サブメニューを表示する */
.header-navigation-has-children:hover .w {
	display:	block;
}
.menu {
	text-align:	center;
}
/* 親メニューをinline-blockにしてセンターに配置 */
.menu > .header-navigation {
	display:	inline-block;
	padding:	.5em .3em;
}
/* リストの記号を消去 */
.header-navigation {
	list-style-type:	none;
}
/* サブメニューをabsoluteにするため、親メニューをrelativeに */
.header-navigation-has-children {
	position:	relative;
}
/* 親メニューにマウスオーバーしたときにカーソルを変更 */
.header-navigation-has-children:hover {
	cursor:	pointer;
}
/* 子を持つ親メニューにマウスオーバーしたときサブメニューを表示 */
.header-navigation-has-children:hover .sub-menu {
	display:	block;
}
/* サブメニューをabsoluteにして親メニューの下に配置。スタイルは適宜調整してください */
.sub-menu {
	display:	none;
	position:	absolute;
	top:	70%;
	left:	0;
	width:	100px;
	background:	white;
	box-shadow:	0px 0px 3px rgba(0, 0, 0, 0.2);
	padding:	0;
}
/* サブメニューの境目をわかりやすくするため、一番下の項目以外下線を引いた */
.sub-menu > .header-navigation:not(:last-child) {
	border-bottom:	1px solid #eee;
}
/* サブニューのリンクタグをheader-navigationの大きさと合わせ、クリックしやすいようにした */
.sub-menu > .header-navigation a {
	display:	inline-block;
	width:	100%;
	height:	100%;
	padding:	.5em 0;
}
/* サブメニューにマウスオーバーしたときリンクの背景色とテキストカラーを変更 */
.sub-menu > .header-navigation a:hover {
	background:	black;
	color:	white;
}

分かる方いますでしょうか？