为什么我的下拉菜单不显示？答案

【问题标题】：Why isn't my dropdown menu showing?为什么我的下拉菜单不显示？
【发布时间】：2012-06-30 03:43:37
【问题描述】：

我用 HTML 和 CSS 构建了一个下拉菜单。当您将鼠标悬停在 "Women" 链接上时，应该会显示下拉菜单，但由于某种原因它没有显示。我找不到问题。

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>

【问题讨论】：

检查该答案中更新的答案和 jsfiddle 链接。

标签： html css drop-down-menu frontend submenu

【解决方案1】：

在这里工作：http://jsfiddle.net/surendraVsingh/BKVfa/4/ （已更新）

所以，这里是检查上面更新的小提琴和下面的代码:)

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;}

【讨论】：

这不可能在 Opera 12 中使用，但在其他地方可能。只要您将鼠标从“女性”文本中移开，它就会立即关闭。
检查更新的小提琴以回答它只是#submenu的顶部位置的问题。
@SVS 干得好！所以我想使用可见性属性是错误的。你能解释一下 display:block 是如何或为什么工作以显示隐藏元素的吗？
使用可见性没有错，它只是使该块不可见，但它仍然占用另一方面显示的空间：none 使元素不可见并渲染为不存在（不占用空间）。 stackoverflow.com/questions/3475119/…

【解决方案2】：

您将可见性规则应用于链接本身，而不是子菜单。更改此行：

a#women:hover {visibility:visible;}

...进入这个：

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

【讨论】：