水平悬停导航菜单答案

【问题标题】：Horizontal hovering navigation menu水平悬停导航菜单
【发布时间】：2016-06-06 20:34:12
【问题描述】：

我对 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>

【问题讨论】：

标签： css drop-down-menu navigation hover css-position

【解决方案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>

【讨论】：

谢谢萨加尔。解决方案奏效了。我明白你做了什么。你能解释一下为什么 ul.inner li 有效而 .navigation ul li 无效吗？我基本上是在做同样的事情，只是调用更广泛的类，即 .navigation，然后调用 ul li，而不是为内部 ul 创建一个类并通过 ul.inner li 来调用它。谢谢
因为你在 .navigation 中有两个 ul，所以如果你只在 css 中使用 .navigation ul，那么 css 将适用于两者，这就是为什么我使用类作为内部 ul.. 欢迎

【解决方案2】：

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

【讨论】：

我厌倦了它不起作用......我也尝试了很多不同的方法，但似乎没有任何效果。我还给了 .navigation ul 一个边框，这表明了问题......但如果我改变它的位置，那么我的下拉菜单不会立即位于主要 li 下方。