带有过渡效果的奇怪菜单效果

Question

我想用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;
}