CODEWITHSUNDEEP
csshoveroverflowcss-transitions
SISYN
SISYN

Reputation: 2259

CSS Transition - Issue with Height in UL/LI tags

I am trying to get my CSS transitions down smoothly, but I'm having one last issue. It's pretty superficial I'll admit, but I'd like to get it "fixed" if at all possible. I've tried it in Chrome, Firefox, and IE and it does this in all browsers.

The UL and LI elements that I'm manipulating are part of a navigation toolbar. The toolbar can be seen in the top left corner of the following URL: http://fretfast.com/templates/clean/sample.php

When you hover over one of the elements that has an expandable list, such as learn, teach, or community, you will see that it expands very smoothly (assuming your browser supports CSS3 transitions, of course); however, when you move your mouse away from the expandable list, the marginal area at the top of the list gets eradicated immediately which makes all the subsequent text shift up too quickly.

For instance, if you hover over learn, an expandable menu will be presented that gives the options of lessons, questions, and tips. However, when you move your mouse out and the menu collapses, the first option (lessons) is instantly pushed up so that it is right below the button's main text (learn).

Here is the CSS that I am using for the navigation bar, but for the life of me I cannot figure out why the height transition only works in one direction.

#topNav {
    list-style-type: none; height: 25px; padding: 0; margin: 0;
}
#topNav * { font-size: 15px; }
#topNav li {
    float: left; position: relative; z-index: 1; 
    padding: 0; line-height: 23px; background: none; repeat-x 0 0;
    padding-top: 2px;
}
#topNav li:hover {
    background-color: #C0C0C0; z-index: 2;
    padding-top: 0;
    border-top: 2px solid #59B4FF;
}
#topNav li a {
    display: block; padding: 0 15px; color: #000; text-decoration: none;
}
#topNav li a:hover { color: #222222; }
#topNav li ul {
    opacity: 0; position: absolute; left: 0; width: 8em; background: #C0C0C0; 
    list-style-type: none; padding: 0; margin: 0;
}
#topNav li:hover ul { opacity: 1; }
#topNav li ul li {
    float: none; position: static; height: 0; line-height: 0; background: none;
}
#topNav li:hover ul li {
    height: 25px; line-height: 25px;
}
#topNav li ul li a { background: #C0C0C0; }
#topNav li ul li a:hover {
    text-indent: 0.3em;
    background-color: #59B4FF;
}

#topNav li {
    transition: background-color 0.2s ease;
    -o-transition: background-color 0.2s ease;
    -moz-transition: background-color 0.2s ease;
    -webkit-transition: background-color 0.2s ease;
}
#topNav li a {
    transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
}
#topNav li ul {
    transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}
#topNav li ul li {
    transition: height 0.5s ease;
    -o-transition: height 0.5s ease;
    -moz-transition: height 0.5s ease;
    -webkit-transition: height 0.5s ease;
}
#topNav li ul li a {
    transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;

    transition: text-indent 0.1s linear;
    -o-transition: text-indent 0.1s linear;
    -moz-transition: text-indent 0.1s linear;
    -webkit-transition: text-indent 0.1s linear;
}

I don't believe it has anything to do with the padding-top specification in #topNav li either, because I just added that today for the border highlighting effect and this problem has been going on for longer than that. Any help is greatly appreciated.

Upvotes: 1

Views: 2662

Answers (1)

vals
vals

Reputation: 64164

The property that is causing that is a line-height; more specifically this one.

#topNav li:hover ul li {
    height: 25px; 
    line-height: 25px;
}

if you look at the transitions, it's specified only on height. You can change the transition to all, it seems to display ok. If not, probably the best would be to set the line-height at 25px in the non-hovered properties instead of on the hovered (that is, making it fixed)

#topNav li ul li {
    transition: all 0.5s ease;
}

How can you debug easily issues related to hover ??

In the Chrome inspector, select the item where the hover is defined, go to the styles tab, choose toggle element state and check hover. Now the state is set to hover permanently. Just go around checking and un-checking pro`perties to see where do you have the problem.

Upvotes: 1

Related Questions