水平悬停导航菜单

Question

我对HTML和CSS相当陌生。我创建了一个水平菜单，下拉菜单将按原样悬停。

但是，我希望下拉列表仅在鼠标悬停在链接上时才出现，而不是占用实际下拉内容的空间。

如果有人可以指出为什么会发生这种情况以及我如何解决它，那就太好了。

这是HTML和CSS。

nav{
    text-align:center;
    font-family:myFirstFont;
    display:inline-block;
    position:absolute;
    left:320px;
    top:56px;
}
.navigation {
    list-style-type:none;
    word-spacing:50px;
    max-width:100%;
    font-size:1.2em;
    position:relative;
}
.navigation li {
    display:inline-block;
    position:relative;
}
.navigation a{
    text-decoration:none;
    color:#00a8e7;
}
 
.navigation ul {
    position:absolute;
    text-align:justify;
}
.navigation ul li {
    display:block;
    position:relative;
    right:40px;
    opacity:0;
    visibility:hidden;
}
.navigation li:hover ul li{
    opacity:1;
    visibility:visible;
}

 <nav>
            <ul class="navigation">
                <li><a href="#">ABOUT</a>
                <ul>
                    <li><a href="#">COMPANY</a></li>
                    <li><a href="#">TEAM</a></li>
                </ul>
                </li>
                <li><a href="#">SERVICES</a>
                  <ul>
                      <li><a href="#">WEBSITE</a></li>
                      <li><a href="#">SEO</a></li>
                      <li><a href="#">LOGO</a></li>
                  </ul>
                </li>
                <li><a href="#">PORTFOLIO</a>
                    <ul>
                        <li><a href="#">WEBSITES</a></li>
                        <li><a href="#">LOGO DESIGN</a></li>
                    </ul>
                </li>
                <li><a href="#">CONTACT</a>
                    <ul>
                        <li><a href="#">PHONE</a></li>
                        <li><a href="#">EMAIL</a></li>
                    </ul>
                </li>
                <li><a href="#">TESTIMONIALS</a></li>
            </ul>
        </nav>

Answer 1

nav{
    text-align:center;
    font-family:myFirstFont;
    display:inline-block;
    position:absolute;
    left:320px;
    top:56px;
}
.navigation {
    list-style-type:none;
    word-spacing:50px;
    max-width:100%;
    font-size:1.2em;
    position:relative;
}
.navigation li {
    display:inline-block;
    position:relative;
}
.navigation a{
    text-decoration:none;
    color:#00a8e7;
}
 
.navigation ul {
    position:absolute;
    text-align:justify;
}
ul.inner li {
    display:none;
    position:relative;
    right:40px;
    
    
}
.navigation li:hover ul.inner li{
    display:block
}

<nav>
            <ul class="navigation">
                <li><a href="#">ABOUT</a>
                <ul class="inner">
                    <li><a href="#">COMPANY</a></li>
                    <li><a href="#">TEAM</a></li>
                </ul>
                </li>
                <li><a href="#">SERVICES</a>
                  <ul class="inner">
                      <li><a href="#">WEBSITE</a></li>
                      <li><a href="#">SEO</a></li>
                      <li><a href="#">LOGO</a></li>
                  </ul>
                </li>
                <li><a href="#">PORTFOLIO</a>
                    <ul class="inner">
                        <li><a href="#">WEBSITES</a></li>
                        <li><a href="#">LOGO DESIGN</a></li>
                    </ul>
                </li>
                <li><a href="#">CONTACT</a>
                    <ul class="inner">
                        <li><a href="#">PHONE</a></li>
                        <li><a href="#">EMAIL</a></li>
                    </ul>
                </li>
                <li><a href="#">TESTIMONIALS</a></li>
            </ul>
        </nav>

Answer 2

尝试给主要的 li 元素（关于、服务、投资组合...）class="top"。然后将 CSS 文件编辑为 .top.li：hover ul li {...}。