1 reply [Last post]
solyent
solyent's picture
Offline
newbie
Last seen: 4 years 15 weeks ago
Timezone: GMT+2
Joined: 2010-07-17
Posts: 2
Points: 3

I can't get a hover working for the current Page. It works fine when I'm on "Termine" and go to the Submenus of "Studium", then the colors change, but it doesn't work when I'm on "Studium".
I'm using Joomla in the background, so the HTML is just the one generated for this exact "Studium" page. The problem is somewhere in the CSS, but I can't find it.... Does anyone know the solution?

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" media="screen" href="superfish.css" /> 
</head>
 
<body>
<div id="navigation">
 
<ul class="menu sf-menu sf-horizontal">
            <li class="first-child item1">
            <a  href="#"><span>Startseite</span></a>
            </li>
            <li class="item2"><a href="#"><span>Termine</span></a>
                 </li>
 
      <li id="current" class="parent active item3">
            <a  href="#"><span>Studium</span></a>
         <ul>
                <li class="first-child item8"><a h href="#"><span>Bachelor Biologie</span></a>
                </li>
              <li class="last-child item9"><a  href="#"><span>Bachelor Biochemie</span></a>
              </li>
         </ul>
      </li>
      <li class="item4"><a  href="#"><span>Die Fachschaft</span></a>
      </li>
      <li class="item5"><a  href="#"><span>Kontakt</span></a>
      </li>
      <li class="item6"><a href="#"><span>Links</span></a>
      </li>
      <li class="last-child item7"><a  href="#"><span>Gästebuch</span></a></li>
 
</ul>
 
         </div>
 
</body>
</html>

CSS:

.sf-menu, .sf-menu * {
 
    padding:        0;
    list-style:        none;
    margin: 0 auto;
}
.sf-menu {
    line-height:    1.0;
 
}
.sf-menu ul {
    position:        absolute;
    top:            -999em;
    width:            16em;    /*100%; left offset of submenus need to match (see below) */
}
.sf-menu ul li {
    width:            100%;
    position:relative;
 
}
.sf-menu li:hover {
    /*visibility: inherit  fixes IE7 'sticky bug' */
}
.sf-menu li {
    float:            left;
    position:        relative;
}
.sf-menu a {
    display:        block;
    position:        relative;
}
.sf-menu li:hover ul {
    left:            0;
    top:            100%;  /*match top ul list item height */
    z-index:        99;
    padding-top:     1px;
}
ul.sf-menu li:hover li ul {
    top:            -999em;
}
ul.sf-menu li li:hover ul{
    left:            16em; /* match ul width */
    top:            0;
}
ul.sf-menu li li:hover li ul {
    top:            -999em;
}
ul.sf-menu li li li:hover ul{
    left:            100%; /* match ul width */
    top:            0;
}
.sf-menu li {
    background:        #fff;  /*top BG*/
}
 
 
.sf-menu li li li {
    background:        #217a47;  /*dropdown 2 BG*/
}
 
.sf-menu li:hover a {
     background:        #217a47;        /*top Hover if mousover bottom*/
    color:                #fff;
}
 
.sf-menu ul li:hover a {            /*bottom Hover */
    background:        #359a35;        
    color:            #fff;
}
 
 
/*** shadows  **/
.sf-shadow ul {
    background:    url('../images/shadow.png') no-repeat bottom right;
    padding: 0 8px 9px 0;
    -moz-border-radius-bottomleft: 17px;
    -moz-border-radius-topright: 17px;
    -webkit-border-top-right-radius: 17px;
    -webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
    background: transparent;
}
 
 
.sf-menu #current a {
    background: #217a47;
    color:        #fff;
} 
.sf-menu li #current:hover a{
        background-color:#84158b;
}
 
.superfish_clear { 
    clear: both !important;
    height: 1px !important;
    overflow: hidden !important;
    font-size: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
}
 
 
/*** ***/
.sf-menu {
    float:            left;
    margin-bottom:    1em;
}
.sf-menu a {
    border-left:    1px solid #fff;
    padding:         0.5em 1em;
    text-decoration:none;
    color:#217a47;
    font-size: 130%;
}
 
.sf-menu ul li a {  
    color:            #fff;  /* Text biottom */
}

solyent
solyent's picture
Offline
newbie
Last seen: 4 years 15 weeks ago
Timezone: GMT+2
Joined: 2010-07-17
Posts: 2
Points: 3

I fixed it by adding 2x

I fixed it by adding 2x !important to the code:

.sf-menu ul li a:hover {            /*bottom Hover */
    background:        #359a35 !important;        
    color:            #fff;
}

and

.sf-menu ul li a {  
    color:            #fff;  /* Text biottom */
    background:    #217a47 !important;
}

Now it works =)