Question

我有一个CSS菜单，其中包含应该有效的下拉菜单。我之前已经建立了下拉菜单，并且过去曾使用过几种CSS悬停效果。这个菜单让我抓狂。

我已经在Stack Overflow上研究了其他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，我的菜单很长，而且我不想在这里添加超过必要的内容。我确信解决方案非常简单，我只是忽略它。

Answer 1

您无法悬停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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

问题是你试图在悬停默认隐藏的元素时显示子菜单，因此没有什么可以实际悬停。

您想要做的就是在您将megapanel父母li徘徊时显示.megamenu>li:hover>.megapanel{display:block;} div：

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

＆＃13;

<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>
</ul>

＆＃13;

make

＆＃13;

Answer 3

看起来问题出在您的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：悬停没有显示

3 个答案: