Good afternoon, dear programmers!
Faced with a small problem, according to TK, you need to make an adaptive menu in a header with a small shadow: Normal condition

But when the width of the window changes and the elements of the list begin to jump, a shadow remains in the vacant space, like this: Not normal condition

I tried to make a shadow not to the ul tag, but to the li, or a tag, but in this case, each button has its own shadow, which also falls on the neighboring button. I will be very pleased with your advice on how to cope with it.
The code on jsbin is http://jsbin.com/zebiqaboki/edit?html,css,output
PS I apologize for such a collective farm explanation))

  • And as for me, the shadow "crawls" well, other buttons can also pass for the "feature" =) Well, if by sabzh - here you need to operate on the width of the element, which is quite difficult to do without mediaquery. Although you can play with the relative width. - alexoander

1 answer 1

You have 6 menu items, respectively, the width should be 100% / 6 = 16.6%, but give links 100% of the width:

.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; } 
  <div class="header-menu"> <ul class="top-menu-ul"> <li class="top-menu-li"><a href='#' class="top-menu-a">Компания</a></li> <li class="top-menu-li"><a href='#' class="top-menu-a">Каталог</a></li> <li class="top-menu-li"><a href='#' class="top-menu-a">Новости</a></li> <li class="top-menu-li"><a href='#' class="top-menu-a">Отзывы</a></li> <li class="top-menu-li"><a href='#' class="top-menu-a">Заявка</a></li> <li class="top-menu-li"><a href='#' class="top-menu-a">Контакты</a></li> </ul> </div>

But you need to understand that on screens at 320px - 768px it will not look very nice. Then it is better to use media queries:

 .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%; } } 
  <div class="header-menu"> <ul class="top-menu-ul"> <li class="top-menu-li"><a href='#' class="top-menu-a">Компания</a></li> <li class="top-menu-li"><a href='#' class="top-menu-a">Каталог</a></li> <li class="top-menu-li"><a href='#' class="top-menu-a">Новости</a></li> <li class="top-menu-li"><a href='#' class="top-menu-a">Отзывы</a></li> <li class="top-menu-li"><a href='#' class="top-menu-a">Заявка</a></li> <li class="top-menu-li"><a href='#' class="top-menu-a">Контакты</a></li> </ul> </div>

  • In your example, on the side there is a “sticking” white piece of ul. Or is it a feature of drawing the built-in tool. - alexoander
  • @alexoander, "tulza"? now look, just to be more precise to be something there is not 16.6, but the 16.6666% principle seemed clear to me - HamSter
  • one
    @Elena thank you so much, I'm right in love with this community!) - TemTik
  • one
    @Elena Well "tulzy" I call that widget that allows you to run html / css / js code directly on the CO site. Yes - everything is ok =) Thank you - alexoander
  • one
    @TemTik If the answer helped you, mark it as correct (checkmark <--- right next to the answer itself under the tally of votes). - alexoander