将鼠标悬停在一个对象上并使用CSS来影响另一个对象（非jQuery）

Question

如何将鼠标悬停在一个对象上并影响其他内容？在我的代码中，当我将鼠标悬停在向下箭头上时，我试图获得下拉菜单。我试图用CSS来做，而不是jQuery或JS。

SEE HERE

HTML

<span class="MyDropDown">Menu Name 
    <ul class="MyDropDownList"> 
     <li>item 1</li> 
     <li>item 2</li> 
     <li>item 3</li> 
    </ul> 
</span> 

JS

var x = document.getElementsByClassName('MyDropDown'); 
for (i = 0; i < x.length; i++) { 
    var s = x[i].innerHTML.split("<")[0]; 
    var l = '<' + x[i].innerHTML.split("<")[1]; 
    x[i].innerHTML = '<table>\n<tr>\n<td>' + s + '</td>\n<td><div></div></td>\n</tr>\n</table>\n' + l; 
} 

CSS

.MyDropDown { 
    display: inline-block; 
    background-color: #333; 
    color: #FFF; 
    border-radius: 5px; 
    white-space: nowrap; 
} 

.MyDropDown td:nth-child(1) { 
    padding:5px 15px; 
    border-right:1px solid #777777; 
} 
.MyDropDown td:nth-child(1):hover { 
    color:#CCC; 
} 

.MyDropDown div:first-child { 
    margin: 0px 5px; 
    border-left: 4px solid transparent; 
    border-right: 4px solid transparent;  
    border-top: 4px solid #FFF; 
} 
.MyDropDown ul { 
    display:none; 
} 
.MyDropDown td:nth-child(2):hover > div:first-child { 
    border-top-color:#CCC; 
} 
.MyDropDown td:nth-child(2):hover > td:first-child{ /*this one*/ 
    border-bottom:1px solid #777777; 
} 
.MyDropDown td:nth-child(2):hover > ul { /*this one*/ 
    display:block; 
    min-height:15px; 
} 

Answer 1

只徘徊在右侧的箭头？

http://jsfiddle.net/coma/b8nt16eo/

div.menu > div.arrow:hover + ul { 
    display: block; 
}