悬停框位置问题

Question

我有一个很大的（对我来说）问题

我正在构建一个网站，试图制作一个类别顶部栏，其中包含一个框，显示鼠标悬停时文本的下行部分。

但是当我将鼠标悬停在类别名称上时，出现框会使类别下降。

如何让它们保持向上，只让盒子向下重叠内容？

    <div id="categories">
                <div class="top-category">  <a class="top-category-link noka uppercase" href="http://mode-m.pl/kategoria/syntezatory-modularne">Syntezatory Modularne</a>
    <div class="hover-box-outline">
        <a class="hover-box-category-top noka uppercase" href="http://mode-m.pl/kategoria/syntezatory-modularne">Syntezatory Modularne</a>
    </div>
</div>
<div class="divider-15"></div>
<div class="top-category">  <a class="top-category-link noka uppercase" href="http://mode-m.pl/kategoria/automaty-perkusyjne">Automaty perkusyjne</a>
    <div class="hover-box-outline">
        <a class="hover-box-category-top noka uppercase" href="http://mode-m.pl/kategoria/automaty-perkusyjne">Automaty perkusyjne</a>
        <br><br><br><br>
    </div>
</div>

<div class="divider-15"></div>

<div class="top-category">  <a class="top-category-link noka uppercase" href="http://mode-m.pl/kategoria/sprzet-studyjny">Sprzęt Studyjny</a>
    <div class="hover-box-outline">
        <a class="hover-box-category-top noka uppercase" href="http://mode-m.pl/kategoria/sprzet-studyjny">Sprzęt Studyjny</a>
    </div>
</div>

<div class="divider-15"></div>

<div class="top-category">  <a class="top-category-link noka uppercase" href="http://mode-m.pl/kategoria/syntezatory">Syntezatory</a>
    <div class="hover-box-outline">
        <a class="hover-box-category-top noka uppercase" href="http://mode-m.pl/kategoria/syntezatory">Syntezatory</a>
    </div>
</div>

<div class="divider-15"></div>

<div class="top-category">  <a class="top-category-link noka uppercase" href="http://mode-m.pl/kategoria/sekwencery">Sekwencery</a>
    <div class="hover-box-outline">
        <a class="hover-box-category-top noka uppercase" href="http://mode-m.pl/kategoria/sekwencery">Sekwencery</a>
    </div>
</div>

<div class="divider-15"></div>

<div class="top-category">  <a class="top-category-link noka uppercase" href="http://mode-m.pl/kategoria/kable">Kable</a>
    <div class="hover-box-outline">
        <a class="hover-box-category-top noka uppercase" href="http://mode-m.pl/kategoria/kable">Kable</a>
    </div>
</div>

<div class="divider-15"></div>

<div class="top-category">  <a class="top-category-link noka uppercase" href="http://mode-m.pl/kategoria/sprzet-gitarowy">Sprzęt Gitarowy</a>
    <div class="hover-box-outline">
        <a class="hover-box-category-top noka uppercase" href="http://mode-m.pl/kategoria/sprzet-gitarowy">Sprzęt Gitarowy</a>
    </div>
</div>          </div>

与 css:

    .top-category {
    display: inline-block;
}

.top-category-link {
    color: #1a1a1a;
    font-size: 10pt;
    transition: text-shadow 0.5s, color 0.5s, font-size 0.5s;
}

.top-category:hover > a{
    color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
    font-size: 15pt;
}

.top-category:hover > .hover-box-outline {
    display: block;
}

.hover-box-outline {
    border: 1px solid;
    background-color: rgba(255,255,255,0.75);
    width: auto;
    display: none;
    margin-top: 25px;
}

.hover-box-category-top {
    color: #1a1a1a;
}

.divider-15{
    width: 15px;
    display: inline-block;
}

Answer 1

只需将 vertical-align: top; 添加到 .top-category:

.top-category {
  display: inline-block;
  vertical-align: top;
}

https://jsfiddle.net/oqshbxge/1/

悬停框位置问题

Hover box position issue

html

css

position

hover

box