jeudi 13 août 2015

Background-color change on hover event not working

I got a problem with the CSS hover-event. I created a page with a navigation bar at the top. For compatibility reasons I had to move away from nav and changed it to a simple div. (nav is not known in IE8, but it still has to be working there.)

<div class="nav">
 <ul>
   <li> <a> Something </a>
      <ul>
        ....
      </ul>
   </li>
   ....
 </ul>
</div>

That resulted in making the hover on my navigation bar not working anymore. But it's not, that nothing is working, only the first one of the following lines does not do it's job anymore. The background simply does not change.

.nav ul li:hover { background: #BFBFBF; }  - not working
.nav ul li:hover > a { color:#FFFFFF; }    - working perfectly fine
.nav ul li:hover > ul { display:block; }   - working perfect as well
.nav ul {
  background: #404040;
  list-style:none;
  padding:0 20px;
  margin: 0;
  height: 30px;
  text-align:left;
  display:block;
}

I double checked basically everything I know, suspected or found, that could be the source of my issue, but I was yet unable to get it back working. I tried using background-color instead of background, without success. I want to do it without having to use anything besides HTML and CSS, which should be possible, since it worked, when I still was using the nav-element.

I am noob to css, maybe I'm missing some really simple detail.

Thanks in advance.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire