The mysterious hover

Question

I've created a vertical menu on the right of page and a not displayed panel (display:none) on the left, next to menu.Now, when I drag the mouse on links of menu (a:hover), the panel on the right should appear, but It doesn't! Why?

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

The <ul> is not a child of , it's a sibling.

So instead of

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

use the adjacent sibling selector +

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