background-colorが適用されません…

Question

navにbackground-colorが適用されず困っています。
【状況】
①div.navで背景色指定→適用される
②div.nav ulを書く→まだ背景色が適用されている
③div.nav liを書く→途端に適用されず、背景色が消える
【確認済】
：；のつけ忘れ、class名スペル

<div class="nav"><div class="section-inner">
				<ul>
					<li>Home</li>
					<li>About</li>
					<li>Sample</li>
				</ul>
		</div></div>

body {
	margin: 0;
	padding: 0;
}
.section-inner {
	max-width :1000px;
}
div.nav {
	background-color: #DDDDDD;	
}

div.nav ul {
	list-style: none;
	margin:0;
	padding:0;
}

div.nav li {
	float:left;
　　padding:10px 15px;
	border-right:1px solid #CCCCCC;

}

どなたかご教授頂けないでしょうか？
よろしくお願いいたします。

Answer 1

【floatを解除する4つの方法（clear:both;、overflow:hidden;、clearfix、height）】
https://web-manabu.com/html-css39/

floatを使用した場合、指定した要素から子要素が認識できなくなります。そのため親要素は高さを保持できなくなります。

Comments

[hellohello]

kei344さん　いつも本当に有難うございます。
なんと！floatにはそんなことが起きるのですね！知りませんでした！
今までfloatは横に並べられるだけのものと認識しておりました。ありがとうございます。

Answer 2

.section-inner,.nav ul,.nav li{background-Color:inherit}

を指定してみてください

Comments

[hellohello]

yambejp さん
ご回答頂き、本当にありがとうございます！
inherit初めて知りました！！！こんな便利なものがあるのですね。
本当にありがとうございます。