The mysterious hover - html

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>
PERFORMANCE<img src="images/menu.png" />
<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

What you're doing in your code right now using #menupanel ul li a:hover ul is trying to target any list that are children of your link element. The list you're trying to target is however not a child but a sibling to your link element.
You can either use the + selector to target the sibling.
#menupanel ul li a:hover + ul{display:block;}
or you can put the hover state on the list element instead.
#menupanel ul li:hover ul{display:block;}
Either one will work
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>
PERFORMANCE<img src="images/menu.png" />
<ul>
<li><h2>PERFORMANCE</h2>
<p>Are you an artist working in the field of live audiovisual...</p>
</li>
</ul>
</li>
</ul>
</div>

Answer 2

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

Answer 3

The <ul> is a sibling of the <a>, not a child. Try:
#menupanel ul>li a:hover~ul {display:block}

Answer 4

Replace :
#menupanel ul li a:hover ul{
display:block;
}
With this :
#menupanel ul li a:hover + ul{
display:block;
}
read more : http://css-tricks.com/child-and-sibling-selectors/