Question

我已经构建了一个包含HTML＆amp;的下拉菜单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>

Answer 1

此处有效：http://jsfiddle.net/surendraVsingh/BKVfa/4/ （已更新）

所以，这里是检查更新小提琴上面＆amp;代码如下：）

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

Answer 2

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

a#women:hover {visibility:visible;}

......进入这个：

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

为什么我的下拉菜单没有显示？

2 个答案: