html - 神秘的悬停

Question

我在页面右侧创建了一个垂直菜单，在左侧菜单旁边创建了一个未显示的面板 (display:none)。现在，当我将鼠标拖到菜单链接 (a:hover) 上时，右边的面板应该出现，但它没有!为什么？

HTML:

<div id="menupanel">
 <ul>
  <li>
    <a href="#performance">PERFORMANCE<img src="images/menu.png" /></a>
     <ul>
      <li><h2>PERFORMANCE</h2>
      <p>Are you an artist working in the field of live audiovisual...</p>
      </li>
     </ul>
  </li>
 </ul>
</div>

CSS:

 #menupanel{

margin-top:50px;
width:300px;
padding:0 75px;
clean:both;
 }

 #menupanel h1{
font-size:16px;
color:#FFF;
margin:10px auto;
text-align:center;
 }

 #menupanel h2{
text-align:center;
padding-top:30px;
color:#FFF;
 }

  #menupanel  ul{
list-style: none;
margin: 0;
width: 300px;
  }

  #menupanel ul li a{
display: block;
margin: 0;
padding: 0 3px;
text-decoration: none;
color: #FFF;
background:#05c597;
height:54px;
text-align:center;
line-height:54px;

   }

  #menupanel ul>li a:hover {
color: #FFF;
background: #3c4c55;
  }

  #menupanel li {
position:relative;
background:#05c597;
margin-bottom:15px;
  }

  #menupanel ul li img{
position:relative;
top:5.8px;
height:46%;
right:0px;
transition:0.5s;
-webkit-transition:0.5s;
-moz-transition:0.5s;
  }

  #menupanel ul li a:hover img{
right:-50px;
  }

  #menupanel ul li ul{
position: absolute;
top: -10px;
left: 100%;
width: 916px;
display:none;
height:350px;

   }


   #menupanel ul li ul li{
    height:350px;
    background: #3c4c55;
    top:10px;
   }

   #menupanel ul li a:hover ul{
              display:block;

   }

Answer 1

您现在使用 #menupanel ul li a:hover ul 在您的代码中所做的是尝试定位作为您的链接元素的子元素的任何列表。然而，您尝试定位的列表不是您的链接元素的子元素，而是兄弟元素。

您可以使用 + 选择器来定位同级。

#menupanel ul li a:hover + ul{display:block;} 

或者您可以将悬停状态放在列表元素上。

#menupanel ul li:hover ul{display:block;}

两者都行 Fiddle

 #menupanel{

margin-top:50px;
width:300px;
padding:0 75px;
clean:both;
 }

 #menupanel h1{
font-size:16px;
color:#FFF;
margin:10px auto;
text-align:center;
 }

 #menupanel h2{
text-align:center;
padding-top:30px;
color:#FFF;
 }

  #menupanel  ul{
list-style: none;
margin: 0;
width: 300px;
  }

  #menupanel ul li a{
display: block;
margin: 0;
padding: 0 3px;
text-decoration: none;
color: #FFF;
background:#05c597;
height:54px;
text-align:center;
line-height:54px;

   }

  #menupanel ul>li a:hover {
color: #FFF;
background: #3c4c55;
  }

  #menupanel li {
position:relative;
background:#05c597;
margin-bottom:15px;
  }

  #menupanel ul li img{
position:relative;
top:5.8px;
height:46%;
right:0px;
transition:0.5s;
-webkit-transition:0.5s;
-moz-transition:0.5s;
  }

  #menupanel ul li a:hover img{
right:-50px;
  }

  #menupanel ul li ul{
position: absolute;
top: -10px;
left: 100%;
width: 916px;
display:none;
height:350px;

   }


   #menupanel ul li ul li{
    height:350px;
    background: #3c4c55;
    top:10px;
   }

   #menupanel ul li:hover ul{
              display:block;

   }

<div id="menupanel">
 <ul>
  <li>
    <a href="#performance">PERFORMANCE<img src="images/menu.png" /></a>
     <ul>
      <li><h2>PERFORMANCE</h2>
      <p>Are you an artist working in the field of live audiovisual...</p>
      </li>
     </ul>
  </li>
 </ul>
</div>