Html 神秘的盘旋

我在页面右侧创建了一个垂直菜单，在左侧菜单旁边创建了一个未显示的面板（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>

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

   }

---

是

的兄弟姐妹，而不是孩子。尝试：

#menupanel ul>li a:hover~ul{display:block}
这个
是
的兄弟姐妹，而不是孩子。尝试：

#menupanel ul>li a:hover~ul{display:block}
这个
不是孩子，而是兄弟姐妹

所以不是

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

使用
+

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

不是的孩子，而是兄弟姐妹

所以不是

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

使用
+

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

您现在在代码中使用的
#menupanel ul li a:hover ul
试图将链接元素的子元素列表作为目标。但是，您试图针对的列表不是子元素，而是链接元素的同级元素

您可以使用
+
选择器以兄弟姐妹为目标

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

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

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

任何一个都可以


#菜单面板{
边缘顶部：50px；
宽度：300px；
填充：0 75px；
清洁：两者皆有；
}
#menupanel h1{
字体大小：16px；
颜色：#FFF；
利润率：10px自动；
文本对齐：居中；
}
#menupanel h2{
文本对齐：居中；
填充顶部：30px；
颜色：#FFF；
}
#梅努帕内尔{
列表样式：无；
保证金：0；
宽度：300px；
}
#梅努帕内尔酒店{
显示：块；
保证金：0；
填充：0 3px；
文字装饰：无；
颜色：#FFF；
背景：#05c597；
高度：54px；
文本对齐：居中；
线高：54px；
}
#menupanel ul>li a:悬停{
颜色：#FFF；
背景#3c4c55；
}
#梅努帕内利{
位置：相对位置；
背景：#05c597；
边缘底部：15px；
}
#梅努帕内尔酒店{
位置：相对位置；
顶部：5.8px；
身高：46%；
右：0px；
过渡：0.5s；
-webkit转换：0.5s；
-moz转变：0.5s；
}
#menupanel ul li a：悬停img{
右：-50px；
}
#梅努帕内尔酒店{
位置：绝对位置；
顶部：-10px；
左：100%；
宽度：916px；
显示：无；
高度：350px；
}
#梅努帕内尔酒店{
高度：350px；
背景#3c4c55；
顶部：10px；
}
#menupanel ul li：悬停ul{
显示：块；
}




演出
你是在现场视听领域工作的艺术家吗





您现在在代码中使用的是
\menupanel ul li a:hover ul
正在尝试将链接元素的子元素列表作为目标。但是，您试图针对的列表不是子元素，而是链接元素的同级元素

您可以使用
+
选择器以兄弟姐妹为目标

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

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

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

任何一个都可以


#菜单面板{
边缘顶部：50px；
宽度：300px；
填充：0 75px；
清洁：两者皆有；
}
#menupanel h1{
字体大小：16px；
颜色：#FFF；
利润率：10px自动；
文本对齐：居中；
}
#menupanel h2{
文本对齐：居中；
填充顶部：30px；
颜色：#FFF；
}
#梅努帕内尔{
列表样式：无；
保证金：0；
宽度：300px；
}
#梅努帕内尔酒店{
显示：块；
保证金：0；
填充：0 3px；
文字装饰：无；
颜色：#FFF；
背景：#05c597；
高度：54px；
文本对齐：居中；
线高：54px；
}
#menupanel ul>li a:悬停{
颜色：#FFF；
背景#3c4c55；
}
#梅努帕内利{
位置：相对位置；
背景：#05c597；
边缘底部：15px；
}
#梅努帕内尔酒店{
位置：相对位置；
顶部：5.8px；
身高：46%；
右：0px；
过渡：0.5s；
-webkit转换：0.5s；
-moz转变：0.5s；
}
#menupanel ul li a：悬停img{
右：-50px；
}
#梅努帕内尔酒店{
位置：绝对位置；
顶部：-10px；
左：100%；
宽度：916px；
显示：无；
高度：350px；
}
#梅努帕内尔酒店{
高度：350px；
背景#3c4c55；
顶部：10px；
}
#menupanel ul li：悬停ul{
显示：块；
}




演出
你是在现场视听领域工作的艺术家吗





更换：

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

为此：

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

阅读更多信息：
替换：

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

为此：

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

阅读更多信息：
您能提供JSFIDLE吗？我只是复制/粘贴了你的代码，我看到你在C中的转换使你的图像“移动”。任何忽略早期答案和接受延迟答案的特殊原因都是现有答案的重复。很抱歉TJ，thk为你的提示提供了正确的帮助！你能提供一个JSFIDLE吗？我只是复制/粘贴了你的代码，我看到你在C中的转换使你的图像“移动”。任何忽略早期答案和接受延迟答案的特殊原因都是现有答案的重复。很抱歉TJ，thk为你的提示提供了正确的帮助@亚历克斯很乐意帮助：）如果我的回答有助于你解决问题，请接受我的回答：）@Alex很乐意帮助：）如果我的回答有助于你解决问题，请接受我的回答：）