出现 CSS 下拉列表，但是当您单击时，它会消失

Question

这是网站:http://breteastman.com/stormwater-basics/

这是下拉菜单 CSS 和菜单 CSS。

#menu-main-menu{margin-left:-30px;}
#menu-main-menu a:hover {color:pink;}
 #menu-main-menu{
    list-style:none;
    display:inline;
    text-align:center;
}
    .main {
        margin-top:20px;
    }
    #menu-main-menu li{
        float:left; 
    }

    #menu-main-menu li{
        padding-left:5px;
        padding-right:5px;
        border-right:1px #fff solid;
    }
    .main{
        padding-top:-1000px;
    }
    #menu-main-menu li a{
            color:#fff;
            font-size:1.2em;
            text-decoration:none;
        }
            #navigation li a:hover{
                color:#399edb;
                text-decoration:none;
            }


/* dropdowns */ 

/* Hiding the other chlidren */ 

ul#menu-main-menu li#menu-item-64:hover ul.sub-menu {display:block;}
ul#menu-main-menu li#menu-item-64:hover ul.sub-menu li a {background-color:#000;padding:5px;color:#fff;margin-left:-20px;}
ul#menu-main-menu li#menu-item-64:hover > ul.sub-menu li.menu-item > ul.sub-menu > * {display:none;}
.sub-menu { position: absolute;display: none;float:none;list-style:none;}
.sub-menu li { clear: both;width:225px;background-color:#000;padding:10px;border:0;text-align:left;}
.sub-menu {list-style:none;}

基本上，当我点击时，下拉菜单就会消失。请帮忙!

Answer 1

尝试去掉 display:none on .sub-menu:

.sub-menu { position: absolute;float:none;list-style:none;}

这应该会让您更接近您的解决方案。