Multiple Element Rollover Using CSS

I need to have divs show {border-bottom:solid 2px #F6开发者_如何学Python3} when a list item is rolled over. I played with .whatever:hover .whatever { but came up with nothing. Any suggestions?

Without seeing your CSS/HTML, it's hard/impossible to post a solution. But as @James Khoury mentioned in the comment, you will need to place the div inside the li. So something like this...

<ul>
    <li class="first">First
        <div class="first">
            First
        </div>
    </li>
    <li class="second">Second
        <div class="second">
            Second
        </div>
    </li>    
</ul>

CSS

div{width:50px; height:50px; 
    border:1px solid blue; 
    margin:1em;}

li a{display:block;}

li.first:hover div.first, li.second:hover div.second{
    border-bottom:solid 2px #F63;}

http://jsfiddle.net/jasongennaro/6rjd9/