html - 无法获取 :hover to function

Question

我试图通过使用悬停来激活 div 来使大型菜单工作

我已经尝试了很多方法，但我就是无法让它们在悬停时显示

这是 jsfiddle 中的基本思想:http://jsfiddle.net/mXx64/5/

这是代码

HTML

<div class="nav-container">
    <ul id="mega-menu">
        <li class="menu1">
            <a href="#">menu1</a>
        </li>
        <li class="menu2">
            <a href="#">menu2</a>
        </li>
        <li class="menu3">
            <a href="#">menu3</a>
        </li>
        <li class="menu4">
            <a href="#">menu4</a>
        </li>
    </ul>
</div>

<div class="menu-area1">
    menu1
</div>

CSS

.nav-container ul li a:hover .menu-area1 {
    display: block;
}

.menu-area1 {
    display: none;
    height: 100px;
    width: 100px;
    background-color: red;
}

任何帮助将不胜感激

编辑 请忽略拼写错误，我知道它在那里，但是代码在修复后仍然无法工作:(

Answer 1

它不会工作，因为你的“.menu-area1”不在 anchor 中如果你想保留这个结构你需要添加 jQuery 否则就像下面一样 工作- http://jsfiddle.net/R37rr/

<div class="nav-container">
  <ul id="mega-menu">
    <li class="menu1"> <a href="#">menu1</a>
      <div class="menu-area1"> menu1 </div>
    </li>
    <li class="menu2"> <a href="#">menu2</a> </li>
    <li class="menu3"> <a href="#">menu3</a> </li>
    <li class="menu4"> <a href="#">menu4</a> </li>
  </ul>
</div>

.menu-area1 {
    display: none;
    height: 100px;
    width: 100px;
    background-color: red;
}
.nav-container ul>li:hover .menu-area1 {
    display: block;
}