Snow_Mac
Snow_Mac

Reputation: 5797

CSS dropdown showing up, but when you go to click, it disappears

Here's the site: http://breteastman.com/stormwater-basics/

Here's the dropdown css & menu 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;}

basically when I go to click, the drop down goes away. Please help!

Upvotes: 0

Views: 426

Answers (2)

Marc Uberstein
Marc Uberstein

Reputation: 12541

You have missing stylesheet properties. I see you are using superfish dropdowns. You can include their stylesheet :

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

and then just adjust your website's navigation styles to what you want.

See my link : http://jsfiddle.net/nCK2P/1/ [excuse the colours used, just for the example]

Upvotes: 1

Allan Collins
Allan Collins

Reputation: 98

Try taking out the display:none on .sub-menu:

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

That should get you closer to your solution.

Upvotes: 1

Related Questions