Здравствуйте. Сегодня изучая видеоурок с созданием меню я столкнулся с одной небольшой проблемкой.
Проблем-с заключается в том, что я не могу понять как заполнить пространство справа от меню.
Самостоятельно решить проблему не получается :'(
Исходник с видеозаписи :
<!DOCTYPE html>
<html>
<head>
<title>Вертикальное меню</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="head">
<div class="ico"><a href="#"><img src="icohead.png"></a></div>
</div>
</header>
<nav id="menuVertical">
<ul>
<li><a href="#1"><div class="img_n"><img src="earth.png"></div><span>Новости</span></a></li>
<li><a href="#2"><div class="img_n"><img src="stat.png"></div><span>+ Статистика</span></a>
<ul>
<li><a href="#2-1">Главная</a></li>
<li><a href="#2-2">Детальная</a></li>
</ul>
</li>
<li><a href="#3"><div class="img_n"><img src="prof.png"></div><span>+ Профиль</span></a>
<ul>
<li><a href="#3-1">Личный кабинет</a></li>
<li><a href="#3-2">Настройки</a></li>
</ul>
</li>
<li><a href="#4"><div class="img_n"><img src="zak.png"></div><span>Закладки</span></a></li>
<li><a href="#5"><div class="img_n"><img src="door.png"></div><span>Выход</span></a></li>
</ul>
</nav>
<div class="menu"><div class="footer">Copyright © 2017<br>
powered by <a href="#1"><font color="#9dacaa">Новости</font></a>
</div></div>
</body>
</html>
CSSbody{
background: #e0e3e5;
font-family: "Roboto", sans-serif, Helvetica, Arial;
margin: 0;
}
.head{
background-color: #fff;
min-height: 80px;
width: 100%;
margin: 0;
box-shadow: 0 1px 3px 0 #888;
position: fixed;
z-index: 10;
display: inline-flex;
}
.ico img{
height: 66px;
margin-top: 7px;
padding: 0 0 3 16px;
}
#menuVertical{
width: 71px;
height: auto;
position: fixed;
z-index: 5;
top: 79px;
transition: .3s;
}
#menuVertical ul{
display: block;
width: 54px;
height: auto;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
#menuVertical ul li{
display: block;
width: 175px;
position: relative;
}
#menuVertical ul li a{
position: relative;
display: block;
width: 198px;
height: auto;
box-sizing: border-box;
font-size: 16px;
text-transform: uppercase;
font-weight: bold;
color: #ccc;
line-height: 2em;
padding: 10px 15px;
background: rgb(4, 52, 65);
text-decoration: none;
text-shadow: 2px 2px 3px #222;
}
#menuVertical ul li a:hover,
#menuVertical ul li:hover a{
background: rgb(30, 60, 67);
color: #fff;
}
#menuVertical ul li ul{
position: absolute;
top: 0px;
left: 198px;
display: none;
width: auto;
}
#menuVertical ul li:hover ul{
display: block;
}
#menuVertical ul li ul li a{
white-space: nowrap;
text-transform: none;
padding: 10px 20px;
width: 153px;
}
#menuVertical ul li ul li a:hover{
background: rgb(38, 79, 88);
color: #fff;
}
.menu{
position: absolute;
width: 198px;
height: 100%;
background: rgb(4, 52, 65);
box-shadow: 1px 2px 3px #888;
position: fixed;
top: 79px;
z-index: 3;
}
.footer{
position: absolute;
width: 198px;
height: 88px;
bottom: -29px;
background: rgb(4, 52, 65);
margin-bottom: 78px;
z-index: 13;
border-top: 1px solid rgb(9, 42, 51);
color: rgb(52, 100, 113);
text-align: center;
padding-top: 22px;
}
.img_n{
transition: .3s;
}
.img_n:hover{
margin-left: 5px;
transition: .3s;
}
/*MEDIA*/
@media screen and (max-width: 1152px){
.menu{
width: 57px;
transition: .3s;
}
#menuVertical ul li a{
width: 57px;
transition: .3s;
}
#menuVertical ul li{
width: 57px;
}
#menuVertical ul li ul li a{
left: -141px;
}
span{
display: none;
}
.footer{
transform: rotate(-90deg);
left: -77px;
border-right: 1px solid rgb(9, 42, 51);
height: 24px;
bottom: 77px;
text-align: left;
padding-left: 11px;
padding-bottom: 25px;
padding-top: 6px;
}
.img_n img{
height: 40px;
margin-left: -7px;
margin-top: 9px;
}
}
@media screen and (min-width: 1152px){
.img_n img{
display: none;
}
}
