CODEWITHSUNDEEP
htmlcssdrop-down-menufrontendsubmenu
the_boy_za
the_boy_za

Reputation: 287

Why isn't my dropdown menu showing?

I've built a drop-down menu with HTML & CSS. The drop-down menu is supposed to show, when you hover over the "Women" link, but for some reason it is not showing. I Can't find the problem.

CSS:

li.menu_item {display:inline; list-style-type: none; padding-right: 20px; position:relative; }
#menu li a {text-decoration:none; color:black;}
#menu_main{border-color:#E2E2E2;border-style:solid; border-width:1px 0 1px 0;}

#submenu{  margin:0; padding:0; position:absolute; width:550px; border:1px solid black; left:5px; top:34px; background:#F6F6F6; visibility:hidden;}
a#women:hover {visibility:visible;}
.submenu{ margin:0; padding:0; }
.submenu li{ margin:0; padding:0; list-style:none; }
.submenu_vak{float:left; width:150px; margin: 5px; padding: 5px;}
.submenu_titel{font-weight:bold;}

HTML: 

    <ul id="menu">
        <li class="menu_item"><a href="merken2.php">Home</a></li>
        <li class="menu_item"><a href="steden.php">City</a></li>
        <li class="menu_item"><a id="women" href="#">Women</a>
           <div id="submenu">
              <div class="submenu_vak">
             <ul class="submenu">
                <li class="submenu_titel"><a href="#">Kleding</a></li>
                <li><a href="#">Broeken & Jeans</a></li>
                <li><a href="#">Jassen</a></li>
                <li><a href="#">Truien & Vesten</a></li>
                <li><a href="#">Colberts & Pakken</a></li>
                <li><a href="#">Lingerie</a></li>
             </ul>
              </div>
              <div class="submenu_vak">
             <ul class="submenu">
                <li class="submenu_titel"><a href="#">Schoenen</a></li>
                <li><a href="#">Sneakers</a></li>
                <li><a href="#">Slippers & Sandalen</a></li>
                <li><a href="#">Instappers</a></li>
                <li><a href="#">Nette schoenen</a></li>
             </ul>
              </div>
              <div class="submenu_vak">
             <ul class="submenu">
                <li class="submenu_titel"><a href="#">Accessoires</a></li>
                <li><a href="#">Horloges</a></li>
                <li><a href="#">Brillen & Zonnebrillen</a></li>
                <li><a href="#">Riemen</a></li>
                <li><a href="#">Tassen</a></li>
             </ul>
              </div>                  
           </div>
        </li>
        <li class="menu_item"><a href="#">Men</a></li>
    </ul>   
</div>

Upvotes: 1

Views: 585

Answers (2)

SVS
SVS

Reputation: 4275

Here its working: http://jsfiddle.net/surendraVsingh/BKVfa/4/ (UPDATED)

So, here its is check updated fiddle above & code below :)

CSS

li.menu_item {display:inline; list-style-type: none; padding-right: 20px; position:relative; }
#menu li a {text-decoration:none; color:black;}
#menu_main{border-color:#E2E2E2;border-style:solid; border-width:1px 0 1px 0;}

#submenu{  margin:0; padding:0; position:absolute; width:550px; border:1px solid black; left:5px; top:34px; background:#F6F6F6; display:none;}
.menu_item:hover #submenu {display:block;}
.submenu{ margin:0; padding:0; }
.submenu li{ margin:0; padding:0; list-style:none; }
.submenu_vak{float:left; width:150px; margin: 5px; padding: 5px;}
.submenu_titel{font-weight:bold;}​

Upvotes: 2

JJJ
JJJ

Reputation: 33153

You're applying the visibility rule to the link itself, not to the submenu. Change this line:

a#women:hover {visibility:visible;}

...into this:

.menu_item:hover #submenu {visibility:visible;}

Upvotes: 0

Related Questions