Проблема со стилизацией адаптивного меню

#html #css

Добрый день, уважаемые программисты!
Столкнулся с небольшой проблемой, по ТЗ нужно сделать адаптивное меню в шапке с небольшой
тенью:


Но когда изменяется ширина окна и элементы списка начинают перескакивать, в освободившемся
месте остается тень, как здесь: 

Пробовал сделать тень не тегу ul, а тегу li, либо a, но в таком случае получается
у каждой кнопки своя тень, падающая в том числе и на соседнюю кнопку.
Буду оч рад Вашим советам, как с этим справиться.
Код на jsbin - http://jsbin.com/zebiqaboki/edit?html,css,output
P.S. извиняюсь за такое колхозное объяснение))
    

Ответы

Ответ 1

У Вас 6 пунктов меню, соответственно, ширина должна быть 100%/6 = 16.6%, а вот ссылкам
100% ширины дать:



.top-menu-ul {
    margin: 0;
    padding: 0;
    height: 52px;
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.65);
}
.top-menu-li {
    list-style-type: none;
    float: left;
    text-align: center;
    width: 16.6666%;
}
.top-menu-a {
    line-height: 52px;
    display: block;
    width: 100%;
    border-right: 1px solid #df4242;
    border-left: 1px solid #df4242;
    background-image: -moz-linear-gradient( 90deg, rgb(170, 3, 22) 0%, rgb(203, 24,
44) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(170, 3, 22) 0%, rgb(203,
24, 44) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(170, 3, 22) 0%, rgb(203, 24,
44) 100%);
    text-decoration: none;
    font-size: 18px;
    color: white;
}
.top-menu-a:hover {
  background: #df4242;
}
  

    

      
Компания
      
Каталог
      
Новости
      
Отзывы
      
Заявка
      
Контакты
    
  




Но нужно понимать, что на экранах в 320px - 768px это будет смотреться не очень красиво.
Тогда лучше использовать медиазапросы:



.top-menu-ul {
    margin: 0;
    padding: 0;
    height: 52px;
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.65);
}
.top-menu-li {
    list-style-type: none;
    float: left;
    text-align: center;
    width: 16.6666%;
}
.top-menu-a {
    line-height: 52px;
    display: block;
    width: 100%;
    border-right: 1px solid #df4242;
    border-left: 1px solid #df4242;
    background-image: -moz-linear-gradient( 90deg, rgb(170, 3, 22) 0%, rgb(203, 24,
44) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(170, 3, 22) 0%, rgb(203,
24, 44) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(170, 3, 22) 0%, rgb(203, 24,
44) 100%);
    text-decoration: none;
    font-size: 18px;
    color: white;
}
.top-menu-a:hover {
  background: #df4242;
}

@media screen and (max-width:768px){
  .top-menu-li {
    display: block;
    width: 100%;
  }
}
  

    

      
Компания
      
Каталог
      
Новости
      
Отзывы
      
Заявка
      
Контакты