Question

以下是网站：http://breteastman.com/stormwater-basics/

这是下拉列表css＆amp;菜单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

尝试取出.sub-menu：

上的display：none

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

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

Answer 2

您缺少样式表属性。我看到你正在使用超级鱼下拉菜单。您可以包含他们的样式表：

<link rel="stylesheet" media="screen" href="http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish.css" />

然后只需将您网站的导航样式调整为您想要的内容。

请参阅我的链接：http://jsfiddle.net/nCK2P/1/ [请原谅使用的颜色，仅供参考]

CSS下拉显示，但当你点击它时，它就会消失

2 个答案: