CSS Dropdown élément initialement ouvert

Question

J'ai une liste d'images et en dessous du nom de la personne appartenant à l'image comme UL. En survolant le nom, une phrase d'appartenance à la personne sera affichée.

il ressemble cette

  <ul> 
      <li> 
       <a href="#">Name</a> 
       <ul> 
        <li><a href="#"></a></li> 
        <li class="slogan1"><a href="#">some kind of sentence</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="#">Name 2</a> 
       <ul> 
        <li><a href="#"></a></li> 
        <li class="slogan1"><a href="#">some kind of sentence</a></li> 
       </ul> 
      </li> 
      </ul> 

Cela fonctionne très bien jusqu'à présent. Je veux maintenant que l'élément UL enfant du premier élément LI soit affiché initialement lorsque la page est ouverte et pas seulement sur l'événement hover. Je travaillais avec: premier enfant mais n'a pas eu de succès.

La partie CSS pertinente actuelle se présente comme suit.

ul li ul{ 
display: none;} 

ul li:hover ul{ 
display: block;} 

ul li:hover ul li a{ 
background: #009EE3; 
height:10px;} 

ul li:hover ul li.slogan1 a{ 
background: #009EE3; 
height:45px; 
width:958px; 
position:absolute; 
left:0px; 
padding-top:5px; 
line-height:130%;} 

Pour référence supplémentaire et pour afficher l'implémentation actuelle Link to page

Toute aide, Tipps, des conseils sont très appréciés ... Merci ...

Answer 1

first-child était la bonne idée, il suffit d'ajouter :

ul li:first-child ul { 
    display:block; 
} 

JSFiddle