Question

尝试在悬停时显示子菜单。

在当前状态下非常基本（没有样式）只是试图获得功能。

HTML：

<nav class="main_nav">
        <ul class="main_nav">
            <li><a class="show_menu" href="#">Menu</a></li>
                <li>
                    <ul>
                        <li><a class="hidden_nav" href="#">Functions</a></li>
                        <li><a class="hidden_nav" href="#">Forms</a></li>
                        <li><a class="hidden_nav" href="#">PHP Info</a></li>
                        <li><a class="hidden_nav" href="#">Encoding</a></li>
                    </ul>
                </li>
        </ul>                   
    </nav>

CSS：

.hidden_nav {
display: none;
}

.show_menu:hover > .hidden_nav {
display: block;
color: green;
}

我的问题是CSS定位 - 上面不是我尝试过的唯一方法。任何帮助将不胜感激。

Answer 1

此语法表示“直接子女”

：

.show_menu:hover > .hidden_nav

请改为尝试：

.show_menu:hover .hidden_nav

Answer 2

有一些方法可以重组这个。您应该将子窗口的ul设置为隐藏。然后，您可以让subnav成为兄弟姐妹或孩子（这是下面的兄弟姐妹），并在.show_menu父li悬停时显示：

更新：

HTML

<nav class="main_nav">
    <ul class="main_nav">
        <li><a class="show_menu" href="#">Menu</a>
                <ul class="subnav">
                    <li><a class="hidden_nav" href="#">Functions</a></li>
                    <li><a class="hidden_nav" href="#">Forms</a></li>
                    <li><a class="hidden_nav" href="#">PHP Info</a></li>
                    <li><a class="hidden_nav" href="#">Encoding</a></li>
                </ul>
         </li>
    </ul>                   
</nav>

CSS

.subnav {
  display: none;
 }

.main_nav li:hover ul.subnav {
  display: block;
  color: green;
}

FIDDLE

Answer 3

您的代码结构严重，无法完成您要完成的任务。我将展示一个工作 - 而IMO，时尚 - 的例子来帮助你快速而不是详细介绍。

查看实际操作：http://jsfiddle.net/xLkntwkt/2/

<强> HTML

<nav class="main_nav">
    <ul class="main_nav">
        <li>
            <a class="show_menu" href="#">Menu</a>        
            <ul class="hidden_nav">
                <li><a href="#">Functions</a></li>
                <li><a href="#">Forms</a></li>
                <li><a href="#">PHP Info</a></li>
                <li><a href="#">Encoding</a></li>
            </ul>
        </li>

        <li>
            <a class="show_menu" href="#">Menu 2</a>        
            <ul class="hidden_nav">
                <li><a href="#">Functions</a></li>
                <li><a href="#">Forms</a></li>
                <li><a href="#">PHP Info</a></li>
                <li><a href="#">Encoding</a></li>
            </ul>
        </li>

        <li>
            <a class="show_menu" href="#">Menu 3</a>        
            <ul class="hidden_nav">
                <li><a href="#">Functions</a></li>
                <li><a href="#">Forms</a></li>
                <li><a href="#">PHP Info</a></li>
                <li><a href="#">Encoding</a></li>
            </ul>
        </li>
    </ul>                   
</nav>

<强> CSS

ul.main_nav > li {
    background: #333;
    color: #fff !important;
    padding: 10px;
}

ul.main_nav > li a {
    color: inherit;
    text-decoration: none;
}

ul.main_nav > li .hidden_nav {
    max-height: 0px;
    opacity: 0;

    transition: all 0.25s ease-in-out;
}

ul.main_nav > li:hover .hidden_nav {
    max-height: 300px;
    opacity: 1;
}

响应纯CSS菜单

3 个答案: