I would like to make a smooth effect when hovering over the link, but for some reason the transition does not work. http://codepen.io/leon4y/pen/kXOEAJ

HTML

<nav> <ul> <li><a href="#">Начало</a></li> <li><a href="#">Скидки</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Меню</a></li> <li><a href="#">Контакты</a></li> </ul> </nav>

CSS

 nav{ float: right; margin-right: 25px; margin-top: 25px; } nav ul li{ margin-left: 15px; list-style-type: none; display: inline-block; } nav ul li a{ text-decoration: none; color: #656565; padding: 8px 15px; -webkit-transition: all 0.25s; -moz-transition: all 0.25; -o-transition: all 0.25s; transition: all 0.25s; } nav ul li a:hover{ outline: #656565 solid 1px; }

    1 answer 1

    With the border will be more correct:

     } nav{ float: right; margin-right: 25px; margin-top: 25px; } nav ul li{ margin-left: 15px; list-style-type: none; display: inline-block; } nav ul li a{ text-decoration: none; color: #656565; padding: 8px 15px; -webkit-transition: all 0.25s; -moz-transition: all 0.25; -o-transition: all 0.25s; transition: all 0.25s; border: transparent solid 1px; } nav ul li a:hover{ border: #656565 solid 1px; } 
      <nav> <ul> <li><a href="#">Начало</a></li> <li><a href="#">Скидки</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Меню</a></li> <li><a href="#">Контакты</a></li> </ul> </nav>

    But you can with the outline:

     } nav{ float: right; margin-right: 25px; margin-top: 25px; } nav ul li{ margin-left: 15px; list-style-type: none; display: inline-block; } nav ul li a{ text-decoration: none; color: #656565; padding: 8px 15px; -webkit-transition: all 0.25s; -moz-transition: all 0.25; -o-transition: all 0.25s; transition: all 0.25s; outline: transparent solid 1px; } nav ul li a:hover{ outline: #656565 solid 1px; } 
      <nav> <ul> <li><a href="#">Начало</a></li> <li><a href="#">Скидки</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Меню</a></li> <li><a href="#">Контакты</a></li> </ul> </nav>