Экономное размещение менюшки с overlay эффектом

<nav id="menu">

				<input type="checkbox" id="toggle-nav"/>
				<label id="toggle-nav-label" for="toggle-nav"><i class="icon-reorder"></i></label>

				<div class="box">
					<ul>
						<li><a href="#"><i class="icon-home"></i> главная</a></li>
						<li><a href="#"><i class="icon-file-alt"></i> о нас</a></li>
						<li><a href="#"><i class="icon-copy"></i> вакансии</a></li>
						<li><a href="#"><i class="icon-envelope"></i> контакты</a></li>
					</ul>
				</div>

			</nav>

@import url('css/font-awesome.css');

			a { text-decoration: none; }
			a:hover { text-decoration: underline; }

			li { list-style: none; }



			#menu .box {
				position: fixed;
				text-align: center;
				overflow: hidden;
				z-index: -1;
				opacity: 0;
				width: 100%;
				height: 100%;
				left: 0px;
				top: 0px;
				background: rgba(0,0,0,0.8);
				-webkit-transition: all 0.3s ease-in-out; 
				-moz-transition: all 0.3s ease-in-out; 
				-o-transition: all 0.3s ease-in-out; 
				transition: all 0.3s ease-in-out;
			}

			#menu ul {
				position: relative;
				top: 20%;
				-webkit-transform: scale(2);
				-moz-transform: scale(2);
				-ms-transform: scale(2);
				transform: scale(2);
				-webkit-transition: all 0.3s ease-in-out; 
				-moz-transition: all 0.3s ease-in-out; 
				-o-transition: all 0.3s ease-in-out; 
				transition: all 0.3s ease-in-out;
			}

			#menu li { 
				display: inline-block; 
				margin: 20px;
			}

			#menu li a {
				border-radius: 3px;
				padding: 15px;
				border: 1px solid transparent;
				text-decoration: none;
				font-size: 18px;
				color: #fff;
				-webkit-transition: all 0.2s ease-in-out; 
				-moz-transition: all 0.2s ease-in-out; 
				-o-transition: all 0.2s ease-in-out; 
				transition: all 0.2s ease-in-out;
			}

			#menu li a:hover { border-color: #fff; }

			#menu li a i { 
				margin-right: 5px; 
				font-size: 24px;
			}

			#toggle-nav-label {
				color: rgba(0,0,0,0.5);
				background: rgba(0,0,0,0.2);
				text-align: center;
				line-height: 30px;
				font-size: 16px;
				display: block;
				cursor: pointer;
				position: relative;
				z-index: 500;
				width: 30px;
				height: 30px;
				border-radius: 5px;
			}

			#toggle-nav { display: none; }

			#toggle-nav:checked ~ .box { 
				opacity: 1;
				z-index: 400;
			}

			#toggle-nav:checked ~ .box ul {
				-webkit-transform: scale(1);
				-moz-transform: scale(1);
				-ms-transform: scale(1);
				transform: scale(1);
			}

			#toggle-nav:checked ~ #toggle-nav-label { 
				background: #fff; 
				color: rgba(0,0,0,0.8);
			}