Question

i am trying to make a menu bar like twitter black one but in twitter when you hover on connect or discover from the top menu the link text turn to white and the photo icon too in same time its not work with me so far i don’t know why here the HTML code

  <div class="TopMenu">
     <div class="TopMenuCont">
      <ul>
      <li class="mainNav">
      <a href="#" class="Connect">
      <span>
      <i class="navCon"></i>
      </span>
      Connect
      </a>
      </li>
      </ul>
     </div>
  </div>
</body>
</html>

and here the Css

.TopMenuCont ul li a span .navCon
{
    background-position:-80px -50px;
}

.TopMenuCont ul li .Connect
{
 color: #BBBBBB;
    display: block;
    font-weight: bold;
    height: 12px;
    line-height: 1;
    padding: 13px 12px 15px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
    background:none;
    box-shadow:0 0 0 rgba(0, 0, 0, 0) inset
}

.TopMenuCont ul li a:hover
{
    color:#ffffff;
}

.TopMenuCont ul li a:hover > .TopMenu .TopMenuCont ul li a span .navCon
{
    background-position:-80px -80px;
}

this last line is the problem

Answer 1

.TopMenuCont ul li a:hover > .TopMenu .TopMenuCont ul li a span .navCon

should instead be

.TopMenuCont ul li a:hover span .navCon

I think you misunderstand what the > selector does. X > Y selects an element Y that is a direct descendant of X.

Look here for more information on CSS Selectors:

http://www.w3.org/TR/CSS2/selector.html