• 解決済 rili7

    (@rili7)


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

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

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

    /* ナビゲーションメニュー */
    /* 子を持つ親メニューにマウスオーバーしたとき、サブメニューを表示する */
    .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;
    }

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

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • こんにちは

    header、header_inner クラスのスタイルで、overflow: hidden にしているからのようです。
    ここを削除するか、下記のようなスタイルを追加すると表示されるようになると思います。

    @media only screen and (min-width: 601px) {
    	.header {
    	    overflow: visible;
    	}
    	.header_inner {
    	    overflow: visible;
    	}
    }
    トピック投稿者 rili7

    (@rili7)

    ishitaka さん

    遅くなりましたが、ご回答ありがとうございます。

    overflow: hiddenの削除、コードの追加どちらも試してみましたが、変化がありません。

    別の部分の設定が間違っているのかもしれません。

    もう少し探ってみます。

    トピック投稿者 rili7

    (@rili7)

    ishitaka さん

    閲覧履歴の削除を削除したらうまく表示されました。

    去年からいろいろ調べても解決出来なかったのですが、たった1行を消しただけだったので、もっと早く気が付ければ良かったのですが…。

    お忙しいところありがとうございました。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「ナビゲーションメニューのサブメニューが消える」には新たに返信することはできません。