Question

我知道有很多关于这个主题的教程和问题，但我遵循了很多，但没有一个能解决我的问题。

问题是：我有一个HTML和CSS菜单，它的子菜单是隐藏的。它们出现在鼠标悬停时。我想在点击时显示子菜单，而不是在悬停时。

这是我的代码。

<ul class="gn-menu">
<li class="gn-search-item">
<input placeholder="Search" type="search" class="gn-search">
<a class="gn-icon gn-icon-search"><span>Search</span></a>
</li>
<li class="liFirst">
<a class="gn-icon gn-icon-download" href="#">Downloads</a>
<ul class="gn-submenu">
<li><a class="gn-icon gn-icon-illustrator">Vector Illustrations</a></li>
<li><a class="gn-icon gn-icon-photoshop">Photoshop files</a></li>
</ul>
</li>
</ul>

这是我的css

    .liFirst:active .gn-submenu li, .liFirst:hover .gn-submenu li {
    display: block;
}

.gn-submenu li {
        display: none;
        overflow: hidden;
        height: 0;
        -webkit-transition: height 0.3s;
        -moz-transition: height 0.3s;
        transition: height 0.3s;    
        padding-left: 20px;
}

有人可以帮帮我吗？我知道我需要一些JS才能使它有效，但我对CSS并不了解......

抱歉我的英语不好。谢谢你。

Answer 1

你必须使用锚来定义你的div聚焦的时间

        <nav>
        <ul>
            <li><a href="#">menu 1</a></li>
            <li><a href="#">menu 2</a>
                <ul>
                    <li><a href="#">menu 2.1</a></li>
                    <li><a href="#">menu 2.2</a></li>
                    <li><a href="#">menu 2.3</a></li>
                </ul>
            </li>
            <li><a href="#">menu 3</a>
                <ul>
                    <li><a href="#">menu 3.1</a></li>
                    <li><a href="#">menu 3.2</a></li>
                    <li><a href="#">menu 3.3</a></li>
                </ul>
            </li>
        </ul>
        </nav>

                    <style>
        ul, li{
            padding: 0;
            list-style-type: none;
        }
        nav>ul>li{
            display: inline-block;
            border: 1px solid #000;
        }
        nav>ul ul{
            display: none;
            position: absolute;
        }
        nav>ul li:active ul{
            display: block;
        }
        nav>ul ul>li{
            position: relative;
            left: 0;
        }
                    </style>

jsfiddle： http://jsfiddle.net/4tYWX/2/

Answer 2

将.liFirst:hover更改为.liFirst:active

单击切换菜单

2 个答案: