это код html , где у меня контейнер , делаю адаптивное меню для мобильных телефонов тоже
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width , initial-scale=1">
<script src="https://use.fontawesome.com/91779c950c.js "></script>
<link href="https://fonts.googleapis.com/css?family=Cuprum " rel="stylesheet ">
<link rel="stylesheet " href="cssmenu.css ">
<title>Document</title>
</head>
<body>
<div class="container1 ">
<nav class="dws-menu">
<input type="chekbox" name="toggle" id="menu" class="toggLeMenu">
<label for="menu" class="toggLeMenu "><i class="fa fa-check " aria-hidden="true "></i>Меню</label>
<ul>
<li><a href="# "><i class="fa fa-battery-three-quarters " aria-hidden="true "></i>Главная</a></li>
<li><a href="# "><i class="fa fa-anchor " aria-hidden="true "></i>Продукция</a>
<ul>
<li><a href="# ">Одежда</a>
<ul>
<li><a href="# ">Обувь</a></li>
<li><a href="# ">Куртки</a></li>
<li><a href="# ">Броюки</a></li>
</ul>
</li>
<li><a href="# ">Электроника</a>
<ul>
<li><a href="# ">Камера</a></li>
<li><a href="# ">Компьютер</a></li>
<li><a href="# ">Телефоны</a>
<ul>
<li><a href="# ">Бревно</a></li>
<li><a href="# ">Средне</a></li>
<li><a href="# ">Слайдер</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="# ">Продукты питания</a></li>
<li><a href="# ">Инструменты</a></li>
<li><a href="# ">Бытовая техника</a></li>
</ul>
</li>
<li><a href="# "><i class="fa fa-cog " aria-hidden="true "></i>Услуги</a>
<ul>
<li><a href="# ">Закачка </a></li>
<li><a href="# ">Выкачка</a></li>
<li><a href="# ">Копирование</a></li>
</ul>
</li>
<li><a href="# "><i class="fa fa-shopping-bag " aria-hidden="true "></i>Новости</a></li>
<li><a href="# "><i class="fa fa-address-card " aria-hidden="true "></i>Контакты</a></li>
</ul>
</nav>
</div>
а вот я описал в CSS медиазапрос , чтобы при нажатии (input) на меню цвет менялся на черный , но у меня не срабатывает , помогите найти ошибку
.dws-menu label.toggLeMenu{
background: #c9c9c9;
display: none;
padding: 15px 40px;
text-transform: uppercase;
font-size: 14px;
cursor: pointer;
position: relative;
}
.dws-menu label.toggLeMenu .fa{
position: absolute;
top: 15px;
left: 12px;
font-size: 18px;
}
.dws-menu [type="chekbox"]{
display: none;
}
@media all and (max-width: 800px){
.dws-menu{
overflow: hidden;
}
.dws-menu ul {
display: none;
}
.dws-menu label.toggLeMenu{
display: block;
}
input.toggLeMenu:checked + label.toggLeMenu{
background: #000;
color: #fff;
Средний
Простой
