水平悬停导航菜单

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

尝试给主要的li元素（About，Services，Portfolio ...）class =＆＃34; top＆＃34;。然后将CSS文件编辑为.top.li：hover ul li {...}。

Answer 2

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>