[HTML/CSS] スプシの右クリックメニュー的なサムシングを作る備忘録

スプシの右クリックメニューに限らず、よくある階層的なヘッダーのサイトマップにも。

index.html

<div>
	<ul>
		<li>
			<div class="li-txt">1層目 - A</div>
		</li>
		<li>
			<div class="li-txt">1層目 - B</div>
			<ul>
				<li>
					<div class="li-txt">2層目 - A</div>
				</li>
				<li>
					<div class="li-txt">2層目 - B</div>
					<ul>
						<li>
							<div class="li-txt">3層目 - A</div>
						</li>
						<li>
							<div class="li-txt">3層目 - B</div>
						</li>
					</ul>
				</li>
			</ul>
		</li>
		<li>
			<div class="li-txt">1層目 - C</div>
		</li>
	</ul>
</div>

index.css

ul {
  list-style:none;
  width: fit-content;
  padding: 0;
  margin: 0;
}
/* ul内の深い階層も含む全てulを非表示 */
ul ul {
  display: none;
}
/* liホバー時にそのli直下のul要素だけを表示 */
ul li:hover > ul {
  display: block;
  width: fit-content;
}
ul li {
  position: relative;
}
ul li:hover {
  background-color: #ededed;
}
/* ホバーしているliに対して、その下の階層のulが横並びになるようにする */
ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}
.li-txt {
  padding: 5px 10px;
}