Html CSS：悬停不显示

我有一个CSS菜单，有下拉菜单，应该可以工作。我以前构建过下拉菜单，过去也使用过一些CSS悬停效果。这菜单快把我逼疯了

我研究了其他CSS

：hover

和CSS菜单在堆栈溢出上的问题，似乎问题主要是让CSS元素按正确的顺序排列，但是，我仍然不理解我的问题在哪里，以及我在排序上犯了什么错

这是我的CSS：

.megamenu>li>.megapanel{position:absolute;display:none;background:#ffffff;box-shadow: 0px 2px 4px #777; width:100.2%;top:33px;left:0px;z-index:99;padding:20px 30px 20px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

.megamenu>li>.megapanel:hover{display:block;}

我在css类上尝试了不同的组合，并且只使用了

.megapanel

和

.megapanel:hover

当我刷新浏览器并将鼠标悬停在菜单上时，什么都没有发生。当我加载开发工具（在Chrome中）时，它不会在CSS列表中显示

：hover

CSS。我完全迷路了

以下是一段受影响的HTML代码：

<ul class="megamenu skyblue">
        <li><a class="color1" href="index.php">Home</a></li>
        <li class="grid"><a class="color2" href="#">Our Dogs</a>
            <div class="megapanel">
                <div class="row">
                    <div class="col1">
                        <div class="h_nav">
                            <ul>
                                <li><a href="sires.php">Males</a></li>
                                <li><a href="toy-females.php">Toy Females</a></li>
                                <li><a href="females-mini.php">Mini Females</a></li>
                                <li><a href="upcoming.php">Upcoming</a></li>
                                <li><a href="ref.php">Reference</a></li>
                                <li><a href="http://www.colorcountryaussies.com/pedigrees/pp_search.htm" target="_blank">Pedigrees</a></li>
                                <li><a href="past.php">Past Puppies</a></li>
                            </ul>   
                        </div>                          
                    </div></div></div></li>

---

我意识到我没有在这里完成HTML，我的菜单很长，我不想在这里放太多。我确信解决方案非常简单，我只是忽略了它。

看起来问题在于CSS

两行都有值

display:none

我会把它从表格中删除

.megamenu>li>.megapanel{position:absolute;display:none;background:#ffffff;box-shadow: 0px 2px 4px #777; width:100.2%;top:33px;left:0px;z-index:99;padding:20px 30px 20px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

---

看起来问题在于你的CSS

两行都有值

display:none

我会把它从表格中删除

.megamenu>li>.megapanel{position:absolute;display:none;background:#ffffff;box-shadow: 0px 2px 4px #777; width:100.2%;top:33px;left:0px;z-index:99;padding:20px 30px 20px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

---

无法悬停显示有

display:none

的内容

将悬停触发器移动到父级

li

.megamenu > li >.megapanel {
  position: absolute;
  display: none;
  background: #ffffff;
  box-shadow: 0px 2px 4px #777;
  width: 100.2%;
  top: 33px;
  left: 0px;
  z-index: 99;
  padding: 20px 30px 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

.megamenu>li:hover >.megapanel {
  display: block;
}

.megamenu>li{
位置：相对位置；
}
.megamenu>li>.megapanel{
位置：绝对位置；
显示：无；
背景：#ffffff；
盒影：0px 2px 4px#777；
宽度：100.2%；
最高：100%；
左：0px；
填充：20px 30px 20px；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框
}
.megamenu>li:悬停>.megapanel{
显示：块；
}

无法悬停显示有

显示：无的内容

将悬停触发器移动到父级
li

.megamenu > li >.megapanel {
  position: absolute;
  display: none;
  background: #ffffff;
  box-shadow: 0px 2px 4px #777;
  width: 100.2%;
  top: 33px;
  left: 0px;
  z-index: 99;
  padding: 20px 30px 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

.megamenu>li:hover >.megapanel {
  display: block;
}


.megamenu>li{
位置：相对位置；
}
.megamenu>li>.megapanel{
位置：绝对位置；
显示：无；
背景：#ffffff；
盒影：0px 2px 4px#777；
宽度：100.2%；
最高：100%；
左：0px；
填充：20px 30px 20px；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框
}
.megamenu>li:悬停>.megapanel{
显示：块；
}




















问题在于，您试图在悬停时显示默认隐藏的元素的子菜单，因此实际上没有悬停的内容

您要做的是在悬停其父级
li
时显示
megapanel
div，如下所示：

.megamenu>li:hover>.megapanel{display:block;}


.megamenu>li>.megapanel{位置：绝对；显示：无；背景：ffffff；方框阴影：0px 2px 4px#777；宽度：100.2%；顶部：33px；左侧：0px；z索引：99；填充：20px 30px 20px；-webkit方框大小：边框框；-moz方框大小：边框框；方框大小：边框框}
.megamenu>li:hover>.megapanel{display:block；}













问题在于，您试图在悬停时显示默认隐藏的元素的子菜单，因此实际上没有悬停的内容

您要做的是在悬停其父级
li
时显示
megapanel
div，如下所示：

.megamenu>li:hover>.megapanel{display:block;}


.megamenu>li>.megapanel{位置：绝对；显示：无；背景：ffffff；方框阴影：0px 2px 4px#777；宽度：100.2%；顶部：33px；左侧：0px；z索引：99；填充：20px 30px 20px；-webkit方框大小：边框框；-moz方框大小：边框框；方框大小：边框框}
.megamenu>li:hover>.megapanel{display:block；}