响应纯CSS菜单

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

有一些方法你应该重组这一点。您应该将子导航的ul设置为隐藏。然后，您可以让子导航器是兄弟或子(下面是一个兄弟)，并在.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;
}

小提琴

Answer 2

这个语法的意思是“直接子”：

.show_menu:hover > .hidden_nav

试一试：

.show_menu:hover .hidden_nav

Answer 3

您的代码对于您要完成的任务的结构很差。我将向您展示一个实用的、时尚的示例，帮助您快速地帮助您，而不是详细介绍。

在行动中看到它：http://jsfiddle.net/xLkntwkt/2/

<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;
}