关闭点击纯CSS的下拉菜单 [英] close dropdown menu on click pure css

问题描述

我有一个菜单栏下拉菜单和子菜单使用纯css..my问题是如何关闭/折叠下拉当我点击下拉菜单或子菜单.. 这是我创建的示例

i have a menu bar with dropdown menu and submenu using pure css..my problem is how to close/collapse the dropdown when i click on the dropdown or the submenu..this is the sample i made

这是 html / p>

this is the html

<div id="headermenu">
    <ul >
        <li id=""><a href="#">menu1</a></li>
        <li id=""><a href="#">menu2</a>
            <ul class="">
                <li><a href="#">submenu1</a>
                    <ul>
                        <li><a href="#">submenu.1</a></li>
                        <li><a href="#">submenu.2</a></li>
                        <li><a href="#">submenu.3</a></li>
                        <li><a href="#">submenu.4</a></li>
                    </ul>
                </li>
                <li><a href="#">submenu2</a>
                    <ul>
                        <li><a href="#">submenu.1</a></li>
                        <li><a href="#">submenu.2</a></li>
                        <li><a href="#">submenu.3</a></li>
                    </ul>
                </li>
                <li><a href="#">submenu3</a>
                    <ul>
                        <li><a href="#">submenu.1</a></li>
                        <li><a href="#">submenu.2</a></li>
                    </ul>
                </li>
                <li><a href="#">submenu4</a></li>
                <li><a href="#">submenu5</a></li>
                <li><a href="#">submenu6</a>
                    <ul>
                        <li><a href="#">submenu.1</a></li>
                        <li><a href="#">submenu.2</a></li>
                        <li><a href="#">submenu.3</a></li>
                    </ul>
                </li>
                <li><a href="#">submenu7</a></li>
                <li><a href="#">submenu8</a>
                    <ul>
                        <li><a href="#">submenu.1</a></li>
                        <li><a href="#">submenu.2</a></li>
                    </ul>
                </li>
            </ul>
        </li>           
        <li id=""><a href="#">menu3</a>
            <ul>
                <li><a href="#">submenu1</a>
                    <ul>
                        <li><a href="#">submenu.1</a></li>
                        <li><a href="#">submenu.2</a></li>
                    </ul>
                </li>
                <li><a href="#">submenu2</a></li>
            </ul>
        </li>
        <li id="menutourists"><a href="#">menu4</a>
            <ul>
                <li><a href="#">submenu1</a></li>
                <li><a href="#">submenu2</a></li>
                <li><a href="#">submenu3</a></li>
                <li><a href="#">submenu4</a></li>
                <li><a href="#">submenu5</a>
                    <ul>
                        <li><a href="#">submenu.1</a></li>
                        <li><a href="#">submenu.2</a></li>
                    </ul>
                </li>
                <li><a href="#">submenu6</a></li>
            </ul>
        </li>
        <li id="menuresidents"><a href="#">menu5</a>
            <ul>
                <li><a href="#">submenu1</a>
                    <ul>
                        <li><a href="#">submenu.1</a></li>
                        <li><a href="#">submenu.2</a></li>
                        <li><a href="#">submenu.3</a></li>
                    </ul>
                </li>
                <li><a href="#">submenu2</a></li>
                <li><a href="#">submenu3</a></li>
                <li><a href="#">submenu4</a></li>
            </ul>
        </li>
    </ul>   
</div>

这是css

#headermenu{
    width: 90%;
    height: 20%;
    margin-right:5%;
    margin-left:5%;
    margin-bottom: .5%;
}
#headermenu ul ul {
    display: none;
}
#headermenu ul li:hover > ul {
    display: block;
}
#headermenu ul{
    padding:0; 
    margin:0; 
    white-space:nowrap;
    list-style: none;
    position: relative;
    display: inline-table;
}
#headermenu ul li {
    width:100px;
    height:45px;
    float:left;
    left:0;
    text-decoration:none;
    text-align:center;
    font-family:century gothic;
    background-color:#fef3e2;
}
#headermenu ul li:hover {
    background: #feaa38;
}
#headermenu ul li:hover a {
    color: #ffffff;
}
#headermenu ul li a {
    color:#feaa38;
    display: block;
    text-decoration: none;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}   
#headermenu ul ul {
    border-radius: 0px; 
    padding: 0;
    position: absolute; 
    top: 100%;
}
#headermenu ul ul li {
    float: none; 
    background: #b0c7bd;
    position: relative;
}
#headermenu ul ul li:hover {
    background: #aea7a0;
}
#headermenu ul ul li a {
    color: #ffffff;
}   
#headermenu ul ul li a:hover {
    background: #aea7a0;
}   
#headermenu ul ul ul {
    position: absolute; 
    left: 100%; 
    top:0;
}       

推荐答案

=http://jsfiddle.net/gvmRX/9/ =nofollow>演示）

add this (Demo)

 #headermenu:active ul ul *{
        display:none;
    }

这篇关于关闭点击纯CSS的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！