Странный эффект меню с переходом - PullRequest
Новая
       27

Странный эффект меню с переходом

0 голосов
/ 14 апреля 2019

Я хочу создать простое меню с flexbox. Проблема начинается, когда я добавляю свойство перехода, меню масштабируется, и я хочу сделать его неподвижным. Свойство перехода имеет решающее значение для моего меню, поэтому я не могу отказаться от его использования.

Я попытался удалить переход, и все прошло нормально, но так как мне нужно это свойство, это не вариант.

HTML 

<header>
          <div class='logo-block'>
            <img src='images/logo.png' alt='logo' class='logo' />
            <div class='logo-caption'>Web Design</div>
          </div>

          <nav>
            <ul class='menu'>
              <li><a>Go</a></li>
              <li><a>Go</a></li>
              <li><a>Go</a></li>
            </ul>
          </nav>
</header>

CSS 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: #ffd581;
    padding: 20px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
}

.logo-block {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.logo {
    width: 40px;
    height: 40px;
}

.logo-caption {
    font-size: 18px;
    font-family: 'Marker', Arial;
    padding-left: 5px;
    color: black;
}

.menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style-type: none;
}

.menu li a {
    font-family: 'Marmelad', Arial;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    color: black;
    padding: 14px 18px;
    margin: 5px 5px;
    border-radius: 25px;
    transition: 0.9s;
}

.menu li a:hover {
    background-color: #6927ff;
    color: white;
    cursor: pointer;
}
...