响应式纯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

此语法的意思是“直系孩子”：

.show_menu:hover > .hidden_nav

尝试以下方法：

.show_menu:hover .hidden_nav

Answer 2

有一些方法应对此进行重组。 您应该将subnav的ul设置为隐藏。 然后，您可以让子.show_menu为同级或子级（下面是同级），并在.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 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;
}