悬停时不显示DropDown菜单 [英] DropDown Menu won't to display on hover

问题描述

你好，我有这个下拉菜单：

Hello guys I have this drop down menu:

<ul id="menu">
<li class="dropDown"><a>DropDown</a>
   <div id="container">
       <div class="col1">
          <h3 class="has3">CheckOn</h3>
          <ul>
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link3</a></li>
            <li><a href="#">Link4</a></li>
          </ul></div>
        <div class="col1">
         <h3 class="has3">MasterLink</h3>
        <ul>
            <li><a href="#">Link5</a></li>
            <li><a href="#">Link6</a></li>
            <li><a href="#">Link7</a></li>
            <li><a href="#">Link8</a></li>
        </ul></div>

    <div class="col1">
                    <h3 class="has3">MasterLink</h3>
        <ul>
            <li><a href="#">link9</a></li>
            <li><a href="#">link10</a></li>
            <li><a href="#">link11</a></li>
            <li><a href="#">link12</a></li>
        </ul></div>

    <div class="col1">
                    <h3 class="has3">MasterLink</h3>
        <ul>
            <li><a href="#">link13</a></li>
            <li><a href="#">link14</a></li>
            <li><a href="#">link15</a></li>
            <li><a href="#">link16</a></li>
        </ul></div>
</div>
</li>
</ul>

使用此css：

#menu{background:#9c7d9e; padding:10px;}

#container{
    width: 550px;
    height: 150;
    border: 1px solid #c5a0b7;
    margin: 0 auto;
    display:none;
}

#mainContainer.dropDown:hover ul{
  display: block;
}

.col1{
float:left;
    margin:5px 20px 0px 20px;
    border-right:1px solid #eaeaea;
}

h3{
width:50px;
border-bottom:1px solid #ccc;
margin-bottom:5px;
  }

a{
text-decoration:none;
padding:5px 0;
}

不是序数菜单，而是隐藏 ul ，其中与其他 divs 使用 div uls ，但是当光标从菜单中移过主 li 应该显示容器 div

Is not an ordinal menu because instead of hidden ul, I use a div with other divs inside that contain uls but the behavior should be the same when cursor pass over main li from menu should display container div

我不想更改html结构，因为我需要的菜单设计完全是如何。

I dont want to change html structure because I need the menu to be designed exactly how it is.

fiddle： http://jsfiddle.net

推荐答案

您在处理错误的元素：hover。
http://jsfiddle.net/RwtHn/1419/

You're addressing the wrong element after :hover. http://jsfiddle.net/RwtHn/1419/

使用里面的div是皱眉的。

using a div inside an li is frowned upon.

这篇关于悬停时不显示DropDown菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！