Html 无法获取：悬停到函数

我正试图通过使用鼠标悬停来激活div，让一个超大菜单工作

我尝试过很多种方法，但我就是不能让它们在悬停上显示出来

以下是JSFIDLE的基本思想：

这是代码

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>

任何帮助都将不胜感激

---

编辑请忽略拼写错误，我知道它在那里，但是当它被修复后，代码就不起作用了：（

它不会起作用，因为你的“.menu-area1”不在锚中。如果你想保持这个结构，你需要添加jQuery，否则只需执行下面的操作 工作-

菜单1





.菜单-区域1{
显示：无；
高度：100px；
宽度：100px；
背景色：红色；
}
.nav容器ul>li：悬停。菜单-区域1{
显示：块；
}

我不擅长JQuery，但我得到的是：

---

鉴于您当前的HTML结构，CSS不可能使用。div与

ul

或

li

无关。JS/JQ将是答案。使用此.nav容器ul>li>a:hover{display:block；}。这对您很有帮助。@Jitendra Khatri由于上述原因无法工作。我认为您需要在此处使用JavaScript。

。导航容器ul li a:hover.menu-area1

意味着您的元素的类

menu-area1

需要位于您要应用该样式而悬停的锚点内

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

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

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

$('li').hover(function () {
    $('.menu-area1').show();
});

$('li').hover('out',function () {
    $('.menu-area1').hide();
});