<ul class="mob-menu">
<li><a class="logo" href="">LOGO</a></li>
<li class="toggle"><a href="#"><img src=""></a>
<ul class="submenu">
<li><a href="#about">About us</a></li>
<li><a href="">Contacts</a></li>
<li><a href="#advantages">Advantages</a></li>
<li><a href="">Chat</a></li>
<li><a href="">Sign In</a></li>
</ul>
</li>
</ul>
Вот меню, submenu выпадающее, как его растянуть на всю ширину экрана?
.mob-menu{
display: none;
height: 30px;
position: relative;
width: 100%;
padding: 0;
margin: 0;
}
.mob-menu .logo{
color: #fff;
font-size: 25px;
font-family: 'Roboto Mono', sans-serif;
position: absolute;
top: 13px;
left: 30px;
}
.mob-menu .toggle{
position: absolute;
top: 16px;
right: 60px;
}
.submenu{
position: absolute;
margin: 0;
padding: 0;
display: none;
text-align: justify;
}
.submenu a{
color: #fff;
font-family: 'Roboto Mono', sans-serif;
font-size: 20px;
padding: 10px 200px;
}
.submenu li{
padding: 10px;
border-bottom: 1px solid #656565;
background: #000;
padding: 10px -30% 10px -30%;
}
.submenu li:first-child{
border-top:1px solid #656565;
}
.mob-menu > li:hover > ul.submenu{
display: block;
}
Стили к двум меню, что не так?
Как исправить и сделать?
