CSS：z-indexでプルダウンの重なりをコントロールする

重なりの上下をコントロール：z-index (CSS)

ショップのヘッダーを変更しようと四苦八苦したため備忘録を記します。

四苦八苦の原因はリストの重なり。だって参考文献にしたサイトに間違いが書いてあったんだもん！

はい、この備忘録は正しいものを記載しとくためのメモでございます。

z-indexの動作

cssにて指定します。

この数字は小さいもから順に重ねられていきます。
つまり、【1】が一番下。数字は番号が飛んでいても問題ありません。【1】の次が【100】でもOK。

参考にしたサイトはこれが逆転してたんですよ。
いくら書いても思った動作とならず、でもそのサイトを信用していたので他の箇所に問題があると思って迷走したんです。

あるあるですね。

記載したCSSスクリプトを貼り付けます

/* ------ リストタグ -------------------------------------------------- */
<style>
UL
	{
	list-style:none; 
	margin-top:0px; 
	padding-left:0px; 
	margin-left:0px; 
	margin-bottom:0px;
	}
UL.footer LI
	{
	padding:0px; 
	width:63; 
	@height:63; 
	float:left; 
	margin:0px;
	}
/* ヘッダーcategoryセレクトボタン */
/* 1段目*/
ul.header-dropmenu 
	{
  	list-style: none;
  	width: 100%;
  	height: 40px;
  	margin: 0 auto;
  	padding: 0;
  	display: table;
  	table-layout: fixed;
	}
	
	ul.header-dropmenu > li 
		{
  		position: relative;
  		display: table-cell;
  		vertical-align: middle;
  		border: 1px solid #AAA;
  		background: #AAA; /* 背景色*/
  		z-index: 3; /* 重なり */
		}
	ul.header-dropmenu li a 
		{
  		display: block;
 		text-align: center;
		line-height: 40px;
		font-weight: bold;
  		text-decoration: none;
  		font-size: 15px;
  		color:#fff;
		}
	ul.header-dropmenu > li:hover 
		{
  		background: #ff9900;
  		border: 1px solid #aaa; /* マウスオーバー時の枠線 */
  		border-bottom: none;
		}

		ul.header-dropmenu li ul 
			{
  			visibility: hidden;
  			width: 100%;
  			list-style: none;
  			position: absolute;
  			top: 100%;
  			left: -1px;
  			margin: 0;
  			padding: 0;
  			border: 1px solid #aaa; /* マウスオーバー時の枠線 */
  			border-top: none;
			}
		ul.header-dropmenu li:hover ul 
			{
			visibility: visible;
			}

			ul.header-dropmenu li ul li
				{
  				background: #fff;
  				transition: all .2s ease;
  				z-index: 3; /* 重なり */
				}
			ul.header-dropmenu li ul li a
				{
				color:#000;
  				z-index: 3; /* 重なり */
				}
			ul.header-dropmenu li ul li a:hover
				{
				color:#fff;
  				z-index: 3; /* 重なり */
				}
			ul.header-dropmenu li:hover ul li:hover
				{
  				background: #ff9900;
  				z-index: 3; /* 重なり */
				}
/*2段目*/
ul.header-dropmenu2 
	{
  	list-style: none;
  	width: 100%;
  	height: 40px;
  	margin: 0 auto;
  	padding: 0;
  	display: table;
  	table-layout: fixed;
  	border-top: solid 1px #ffffff;
	}
	
	ul.header-dropmenu2 > li 
		{
  		position: relative;
  		display: table-cell;
  		vertical-align: middle;
  		border: 1px solid #AAA;
  		background: #AAA; /* 背景色*/
  		z-index: 1; /* 重なり */
		}
	ul.header-dropmenu2 li a 
		{
  		display: block;
 		text-align: center;
		line-height: 40px;
		font-weight: bold;
  		text-decoration: none;
  		font-size: 15px;
  		color:#fff;
		}
	ul.header-dropmenu2 > li:hover 
		{
  		background: #ff9900;
  		border: 1px solid #aaa; /* マウスオーバー時の枠線 */
  		border-bottom: none;
		}

		ul.header-dropmenu2 li ul 
			{
  			visibility: hidden;
  			width: 100%;
  			list-style: none;
  			position: absolute;
  			top: 100%;
  			left: -1px;
  			margin: 0;
  			padding: 0;
  			border: 1px solid #aaa; /* マウスオーバー時の枠線 */
  			border-top: none;
			}
		ul.header-dropmenu2 li:hover ul 
			{
			visibility: visible;
			}

			ul.header-dropmenu2 li ul li
				{
  				background: #fff;
  				transition: all .2s ease;
  				z-index: 2; /* 重なり */
				}
			ul.header-dropmenu2 li ul li a
				{
				color:#000;
				}
			ul.header-dropmenu2 li ul li a:hover
				{
				color:#fff;
				}
			ul.header-dropmenu2 li:hover ul li:hover
				{
  				background: #ff9900;
				}
</style>

これでul、liでリストを作成すればOK

/* ------ HTML -------------------------------------------------- */
<ul class="header-dropmenu">
  <li>
    <a href="#">フライパン</a>
    <ul>
      <li><a href="#">サイズ別</a></li>
      <li><a href="#">形状別</a></li>
      <li><a href="#">素材別</a></li>
    </ul>
  </li>
  <li>
    <a href="#">鍋</a>
    <ul>
      <li><a href="#">サイズ別</a></li>
      <li><a href="#">形状別</a></li>
      <li><a href="#">素材別</a></li>
    </ul>
  </li>
</ul>
<ul class="header-dropmenu2">
  <li>
    <a href="#">掃除道具</a>
    <ul>
      <li><a href="#">ほうき塵取り</a></li>
      <li><a href="#">雑巾</a></li>
      <li><a href="#">ほこり取り</a></li>
      <li><a href="#">掃除シート</a></li>
    </ul>
  </li>
  <li>
    <a href="#">洗濯道具</a>
    <ul>
      <li><a href="#">カゴ</a></li>
      <li><a href="#">ネット</a></li>
      <li><a href="#">物干し竿</a></li>
      <li><a href="#">ハンガー</a></li>
      <li><a href="#">ピンチ</a></li>
    </ul>
  </li>
</ul>

いやぁ～つかれた。

でももう間違えません！

＼ 最新情報をチェック ／