CODEWITHSUNDEEP
htmlcssdrop-down-menumenuhover
Lukon
Lukon

Reputation: 265

Hover not working on css menu active li class? Works on others?

I can't seem to get the hover to work on my very first css menu navigation button. It is an active li class, does anyone have any ideas? The other menu option' hover effect is working just fine. CSS code:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
/* Menu CSS */#cssmenu,
#cssmenu > ul {
  background: url(images/highlight-bg.png) no-repeat;
  padding-bottom: 3px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  left:0px;
  top:0px;  
}

#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
  content: "";
  display: table;
}
#cssmenu:after,
#cssmenu > ul:after {
  clear: both;
}
#cssmenu {
  width: auto;
  zoom: 1;
}

li.space1{
    visibility: hidden;
}

li.space2{
    visibility: hidden;
}

#cssmenu > ul {
  background: url(images/menu-bg.png) no-repeat;
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu > ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#cssmenu > ul > li {
  float: left;
  position: relative;
}
#cssmenu > ul > li > a {
  padding: 20px 26px;
  display: block;
  color: white;
  font-size: 13px;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 #9e3825;
  text-shadow: 0 -1px 0 rgba(116, 37, 2, 0.7);
  line-height: 18px;
  margin-right: 10px;

}
#cssmenu > ul > li:hover > a {
  background: url(images/hover.png) repeat;
  text-shadow: 0 -1px 0 #97321f;
  text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
}
#cssmenu > ul > li > a > span {
  line-height: 18px;
  margin-right: 5px;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li > a:active {
  background: url(images/active.png) no-repeat;
}
/* Childs */
#cssmenu > ul ul {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 120px;
  background: url(images/highlight-bg.png) repeat;
  margin: 0;
  padding: 0;
  z-index: -1;
}
#cssmenu > ul li:hover ul {
  opacity: 1;
  visibility: visible;
  margin: 0;
  color: #000;
  z-index: 2;
  top: 52px;
  left: 0;
}
#cssmenu > ul ul:before {
  content: "";
  position: absolute;
  top: -10px;
  width: 100%;
  height: 20px;
  background: transparent;
}
#cssmenu > ul ul li {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
#cssmenu > ul ul li a {
  padding: 18px 26px;
  display: block;
  color: #393939;
  font-size: 13px;
  text-decoration: none;
  text-transform: uppercase;
  width: 150px;
  border-left: 4px solid transparent;
  text-shadow: 0 1px 0 white;
}
#cssmenu > ul ul li a:hover {
  border-left: 4px solid #de553b;
  background: url(images/hover.png) repeat;
  color: white;
  text-shadow: 0 1px 0 black;
}
#cssmenu > ul ul li a:active {
  background: url(images/menu-bg.png) no-repeat;
}

#Table_01 {
    position:absolute;
    left:0px;
    top:1px;
    width:864px;
    height:1px;
    visibility: inherit;
}


#DropDown-Design2-11 {
    position:absolute;
    left:0px;
    top:50px;
    width:347px;
    height:166px;
}

#DropDown-Design2-12 {
    position:absolute;
    left:347px;
    top:50px;
    width:103px;
    height:142px;
}

#DropDown-Design2-13 {
    position:absolute;
    left:450px;
    top:50px;
    width:223px;
    height:166px;
}

#DropDown-Design2-14 {
    position:absolute;
    left:673px;
    top:50px;
    width:191px;
    height:166px;
}

#DropDown-Design2-15 {
    position:absolute;
    left:347px;
    top:192px;
    width:103px;
    height:24px;
}

Upvotes: 1

Views: 855

Answers (1)

G.L.P
G.L.P

Reputation: 7207

Try like this: Demo

If you need mouse over effect for active state then use hover for active li like this:

CSS:

#cssmenu > ul > li:hover > a,#cssmenu > ul > li:hover.active > a {
    background:#000 url(images/hover.png) repeat;
    text-shadow: 0 -1px 0 #97321f;
    text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
}

Upvotes: 1

Related Questions