Hide first element when hovering on second element with CSS

On my page http://ift.tt/1BwjHn7 I have implemented a hover effect with CSS, when hovering on the names below the pics. The first child LI element is being shown on the page. When hovering on the other names, then the first element is currently being "covered" by the the eg. 2nd li element. That's bascially fine, except that the first small (10px) light-blue border right below the name is not being hidden when hovering on the second, thrid, etc. element.

Is there a way to hide the first li element when hovering on the others?

My current html code looks like this

<div class="mensch-img">
<ul>
    <li><img src="images/georges_theiler1.png"></li>
    <li><img src="images/yvonne_ruckli1.png"></li>
    <li><img src="images/mark_bachmann1.png"></li>
    <li><img src="images/rudei_staeger1.png"></li>
    <li class="last"><img src="images/josef_kreyenbuehl.png"></li>
</ul>
<ul>
    <li>
        <a href="#">Georges<br>Theiler</a>
        <ul>
            <li><a href="#"></a></li>
            <li class="slogan1"><a href="#">... weil er sich in der politischen Debatte durchzusetzen weiss. Das hat er als finanzpolitischer Leader der FDP-Fraktion im Kantonsrat bewiesen.<br><span class="small">STAENDERAT | LUZERN</span></a></li>
        </ul>
    </li>

    <li>
        <a href="#">Yvonne<br>Ruckli</a>
        <ul>
            <li><a href="#"></a></li>
            <li class="slogan1"><a href="#">... weil er geradlinig ist und konsequent liberal politisiert.<br>Ganz wie wir Jungfreisinnige.<br><span class="small">PRAESIDENTIN JUNGFREISINNIGE STADT LUZERN</span></a></li>
        </ul>
    </li>

    <li>
        <a href="#">Mark<br>Bachmann</a>
        <ul>
            <li><a href="#"></a></li>
            <li class="slogan1"><a href="#">... weil er ein erfahrener Unternehmer ist und weiss, was es braucht,<br>um den Kanton Luzern wirtschaftlich voran zu bringen.<br><span class="small">UNTERNEHMER | LUZERN</span></a></li>
        </ul>
    </li>

    <li>
        <a href="#">Ruedi<br>Staeger</a>
        <ul>
            <li><a href="#"></a></li>
            <li class="slogan1"><a href="#">... weil er durch und durch ein Sportsmann ist.<br>Das wirkt sich positiv auf seine Art zu politisieren aus.<br><span class="small">PRAESIDENT FC LUZERN</span></a></li>
        </ul>
    </li>

    <li class="last">
        <a href="#">Josef<br>Kreyenbuehl</a>
        <ul>
            <li><a href="#"></a></li>
            <li class="slogan1"><a href="#">... weil unsere Politik Leute braucht, die geerdet sind, <br>aber auch offen für Neues. Damian Hunkeler ist beides.<br><span class="small">PRAESIDENT BAECKERMEISTERVERBAND LUZERN</span></a></li>
        </ul>
    </li>
</ul>

And my CSS like this:

.mensch-img img {
border: 1px solid #0c51a0;
border-bottom:none;
border-radius: 12px 12px 0px 0px;
}

.mensch-img ul{
padding: 0;
list-style: none;
}

.mensch-img ul li{
float: left;
width: 122px;
text-align: center;
margin-right:17px;
margin-top:-4px;
}

.mensch-img ul li.last{
float:right;
margin-right:0px;
}

.mensch-img ul li a {
height:40px;
display: block;
padding: 6px 0px 0px 0px;
color: #fff;
background: #0c51a0;
text-decoration: none;
font-family:'MS-Light';
font-size:0.9375rem;
font-size:15px;
}

.mensch-img ul li a:hover{
color: #fff;
}

.mensch-img ul li ul{
display: none;
}

.mensch-img ul li:first-child ul {
display:block;
}

.mensch-img ul li:first-child ul li a{
background: #009EE3;
height:10px;
}

.mensch-img ul li:hover ul{
display: block;
}

.mensch-img ul li:hover ul li a {
background: #009EE3;
height:10px;
}

.mensch-img ul li:hover ul li.slogan1 a{
background: #009EE3;
height:65px;
width:71%;
position:absolute;
left:29%;
padding-top:10px;
line-height:130%;
font-size:0.875rem;
font-size:14px; 
}


.mensch-img ul li:first-child ul li.slogan1 a{
background: #009EE3;
height:65px;
width:71%;
position:absolute;
left:29%;
padding-top:10px;
line-height:130%;
font-size:0.875rem;
font-size:14px; 
}   


.small {
font-size:0.75rem;
font-size:12px;
font-family:'MS-LightCond';
letter-spacing:1px;
}

Any tipp on how achiving this (if possible at all with CSS) is of course highly appreciated... Many Thanks, Chris