如题。正在实现网站顶栏。有一个下拉菜单的设计。

具体实现参考了 SYZOJ 的顶栏最右端部分。

因为本人初学 CSS / HTML，所以会存在代码丑陋和描述不专业等问题。望海涵。

HTML 部分如下：

<div class="ui top menu"> <!-- 顶栏 -->
  <a class="logo"> <!-- 左对齐 logo -->
    Logo
  </a>
  <div id="rightali"> <!-- 右对齐页面导航 -->
    <a class="active item" id="Home" href="/"> <!-- 普通页面导航 -->
      Home
    </a>
    <!-- 相似内容已省略 -->
    <div class="drop down item flex"> <!-- Interest + 下拉菜单部分 -->
      <a class="item" id="Inte" href="/interests"> <!-- 下拉菜单滴伪装 -->
        Interests
      </a>
      <div class="drop down menu"> <!-- 本体 -->
        <a class="item" id="Inte" href="/interests"> <!-- 伪装成词条 -->
          Interests
        </a>
        <a class="drop down item ex" href="/imgs"> <!-- 下拉菜单页面导航 -->
          Images
        </a>
        <!-- 相似内容已省略 -->
     </div>
  </div>
</div>

我认为对解决问题有帮助的 CSS 内容如下：

/* 顶栏：宽度为整个网页，中轴线对齐 flex */
.container > .menu {
    position: fixed;
    height: 48px;
    width: 100vw;
    display: flex;
    align-items: center;
}
/* 页面导航词条 */
.item, .drop.down.item.ex {
    flex: 0 0 auto;
    position: relative;
    line-height: 1;
    padding: .92857143em 1.14285714em;
    text-align: center;
}
/* 下拉菜单出现：为实现 hover Interest（顶栏）-> hover 下拉菜单，将下拉菜单位置上移 */
.drop.down.menu:hover {
    top: 0;
    opacity: 1;
    width: auto !important;
    height: auto !important;
}
/* 伪装的 Interest（下拉菜单），是否存在方式让我能够不为其高度设置定值？ */
.drop.down.menu > a:first-child {
    height: 22px;
    background-color: rgba(0, 0, 0, 0) !important;
}
/* 下拉菜单，未 hover 时透明，中轴线竖对齐 flex */
.drop.down.menu {
    top: -100px;
    overflow: hidden;
    opacity: 0;
    position: absolute;
    left: 10px;
    flex: 0 0 auto;
    width: 50px;
    display: flex;
    align-items: center;
    flex-direction: column;
}
/* 为实现下拉菜单与 Interest（顶栏）中轴线对齐而存在的中轴线竖对齐 flex */
.drop.down.item.flex {
    display: flex;
    flex-direction: column;
    align-items: center;
}

我现在遇到的问题是：下拉菜单与 Interest 词条（顶栏）宽度不一致，Interest 词条（顶栏）高度与其他词条（顶栏）高度不一致。

我想要知道，我是否有除设置固定值以外的其他方式解决这些问题？