Nth child selector

Question

Im having difficulty using the nth child selector. I have this html code:

HTML

<div class="container">
   <ul class="mh-menu">
      <li>
         <a href="#">
            <span>Chairman of the Board</span>
            <span>Name</span>
         </a>
         <img src="images/richard.jpg" alt="richard"/>
         <p>Some Text</p>
      </li>
      <li>
         <a href="#">
            <span>Chief Executive Officer</span>
            <span>Name</span>
         </a>
         <img src="images/scott.jpg" alt="scott"/>
         <p>Some text</p>
      </li>
      <li>
         <a href="#">
            <span>Executive Vice President</span>
            <span>Name</span>
         </a>
         <img src="images/dana.png" alt="dana"/>
         <p>Some Text</p>
      </li>
      <li>
          <a href="#">
             <span>Executive Vice President</span>
             <span>Name</span>
          </a>
          <img src="images/jay.jpg" alt="jay"/>
          <p>Some text</p>
      </li>
   </ul>
</div>

Along with this CSS:

CSS

.mh-menu li img {
   position: absolute;
   z-index: 1;
   left: 0px;
   top: 0px;
   opacity: 0;
   -webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
   -moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
    -o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
    -ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
    transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;    
    }

.mh-menu li p {
  text-align: left;
  position: absolute;
  z-index: 1;
  left: 540px;
  top: 0px;
  opacity: 0;
  -webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
  -moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
  -o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
  -ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
  transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
  }

 .mh-menu li:hover img {
 left: 300px;
  opacity: 1;
  }

   .mh-menu li:hover p {
  left: 540px;
  opacity: 1;
 text-align: left;
 }

Basically it's a menu that when you hover over the name, the image along with some text pops out of the right side. Right now the images and text all pop out at the top, however I want to move the images down so that when you hover over the name, the image pops out of the top of the name span. How can I used nth-child to select each image to move it down with the top: CSS attribute?

jsFiddle http://jsfiddle.net/FGGpY/5/

Answer 1

.mh-menu li img {
    /* top: 0px; */
    margin-top:-90px;
}

Remove the top: 0px from .mh-menu li img and maybe add margin-top negative whatever the height of the li item. Not really a nth selector issue

FIDDLE

Answer 2

It's a little tricky to determine the big picture or exactly what you want it to look like. But I bet something like this might get you started:

.mh-menu li:hover:nth-child(2) img {
    top: 70px;
}

OR...just remove the "top" declaration from the rule you have with this (?):

.mh-menu li img {...}