水平悬停导航菜单

Question

我对 HTML 和 CSS 还很陌生。我已经创建了一个水平菜单，并且下拉菜单应该悬停。

但是，我希望下拉菜单仅在鼠标悬停在链接上时出现，而不是其下方占据实际下拉内容的 space。

如果有人能指出发生这种情况的原因以及我该如何解决，那就太好了。

这里是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 元素（关于、服务、投资组合...）提供 class="top"。然后将 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>

水平悬停导航菜单

Horizontal hovering navigation menu

css

navigation

css-position

hover

drop-down-menu