Question

我希望在导航项悬停时显示菜单。根据我的设计，菜单绝对定位。我正在使用Google Chrome。当我将鼠标悬停在菜单上时，菜单消失。我怎样才能实现目标？

JSFiddle

HTML：

<div class="hoverzone"> hover here 

  <ul class="menu">
<li> home </li>
<li> works </li>
<li> contact </li>
</ul>

</div>

CSS：

.menu{
position: absolute;
top: 33px;
display: none;
}

.hoverzone{
position: relative;
}

.hoverzone:hover .menu{
    display: block;
}

Answer 1

由于您已绝对定位.menu，因此.hoverzone内不会占用任何空格，因此.hoverzone的{{1}}高度不会扩展.menu悬停在菜单上时状态未激活。

克服这种情况的一种方式不是绝对定位，而是相对而言：

:hover

JSFiddle

Answer 2

最好的方法是稍微修改您的标记，以便您的悬停区域位于列表中，这对于辅助功能也更好。

与下面的代码一样

<ul class="hoverzone">
    <li> hover here 

        <ul class="menu">
            <li> home </li>
            <li> works </li>
            <li> contact </li>
        </ul>
    </li>

 </ul>

然后这样的一些基本的CSS将起作用

ul.hoverzone {
    padding: 0;
    margin: 0;
    list-style: none;
    position : abolsute;
}



ul.hoverzone li {
    float: left;
    width: 10em;
}

ul.hoverzone li ul {
    position: absolute;
    width: 10em;
    left: -999em;
}

    ul.hoverzone li:hover ul {
        left: auto;

}

这里有一个例子http://jsfiddle.net/Nn7Q7/4/

此方法是suckerfish菜单的基本示例，已经存在多年。有关详细信息，请参阅此处http://www.htmldog.com/articles/suckerfish/dropdowns/

Answer 3

小提琴有效，但当你试图向下移动菜单时，它会消失。这是因为.menu距。hoverzone 33px，并且您的鼠标在.hoverzone之前退出.menu。只需将.menu置于.hoverzone内并使用填充对其进行抵消：

.menu{
    position: absolute;
    top: 0px;
    padding-top:33px;
    display: none;
}

http://jsfiddle.net/Nn7Q7/1/

Answer 4

你可以改变你的css，如下所示，或者你可以使用jquery .....

.menu {position：absolute;上：33px; display：none; }

.hoverzone {position：relative;身高：300px; }

.hoverzone：hover .menu {       显示：块; }

Answer 5

z-index尝试在您的菜单类中添加z-index:999可能存在问题。

Answer 6

我通常会从列表，表格以及所有其他内容中删除，因为最终需要更多的CSS才能使样式正确。我通常按下这个下拉菜单：

HTML：

<div class="hoverzone"> 
    hover here 
    <div class="subMenu">
        <div class="subMenuItem">
            home
        </div>
        <div class="subMenuItem">
            works
        </div>
        <div class="subMenuItem">
            contact
        </div>
    </div>
</div>

CSS：

.hoverzone:hover .subMenu
{
    visibility: visible;
    cursor: pointer;
}

.subMenu
{
    visibility: hidden;
}

.subMenuItem:hover 
{
    background: gray;
}

但这完全取决于你和你喜欢什么。

Answer 7

.hoverzone{
      position: relative;
      padding:20px;
      width:100px;
      border:1px solid #ddd;
      transition:all 0.5s linear;
      cursor:pointer;
      background-color:gold;
 }
 .menu{
      left: 0;
      list-style: none outside none;
      padding: 0;
      position:absolute;
      transition:all 0.1s linear;
     z-index:-1;
   }

  .hoverzone:hover .menu{
     margin-top:21px;
     transition:all 0.5s linear;
    }
 .hoverzone:hover .menu li{
     position:relative;
     top:0;
     transition:all 0.5s linear;
   }
.hoverzone .menu li{
    border: 1px solid #DDDDDD;
    padding: 5px 20px;
    width: 100px;
    position:absolute;
    top:-30px;
    left:-1px;
   }

HTML - 悬停时显示菜单

7 个答案: