显示与隐藏

.sub-menu{
	width: 730px;
	height: 458px;
	border: 1px solid #d9dde1;
	background: #fff;
	position: absolute;
	left: 244px;
	top: 0;
	z-index: 999;
	box-shadow: 0 4px 8px rgba(0,0,0,0,1);
}

.inner-box{
	width: 100%;
	height: 100%;
	background: url(../img/fe.png) no-repeat;
	display: none; 
}

.sub-inner-box{
	width: 652px;
	margin-left: 40px;
	overflow: hidden;	
}

.title{
	color: #f01414;
	font-size: 16px;
	line-height: 16px;
	margin: 28px 0 30px 0;
	font-weight: bold;
}

.sub-row{
	margin-bottom: 25px;
}

.bold{
	font-weight: bold; 
}

.mr10{
	margin-right: 10px;
}

.ml10{
	margin-left: 10px;
}

.hide{
	display: none;
}

这里老师讲的显示与隐藏有点整不明白，1. inner-box设置display：none能理解，想要谁显示就通过js设置显示即可，但不明白为什么要把sub-menu一起隐藏？2. 既然要sub-menu隐藏，为什么给sub-menu单独设置一个hide类去隐藏它，而不直接加在sub-menu的样式里呢？以及，不去设置sub-menu的背景颜色，不也看起来像隐藏了么？请老师给详细讲讲