Home/ Questions/Q 8931187
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T09:03:32+00:00

Okay, so I’ve got a couple of problems with getting transitions in CSS to

  • 0

Okay, so I’ve got a couple of problems with getting transitions in CSS to work how I’d like them to, and I’d like someone with some experience in CSS show me how to achieve what I want to achieve.

The actual initial transition I’ve got works fine, but there are two issues I’m having here.

Firstly, the second button/link of my navigation bar – Characters – has three sub-links, which are displayed when the Characters button is hovered over. I would like to get it so that these sub-links aren’t displayed until the actual transition of the Characters button has taken place. I hope you’re getting what I’m saying. So, is this possible, and if so, how?

Secondly, at the moment all I have in place is a transition when the buttons/links are rolled over, but none for when they are rolled out. Instead, on roll-out it goes instantly back to the default state, and I feel really spoils the transition effect. So, I’d like to know whether it is possible to set a transition for the hover out as well as the hover in.

Here is my HTML code:

    <!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>Home</title>
<link rel="stylesheet" href="complex_1.css"/>
</head>

<body>
  <ul id="navbar">
    <li id="home"><a href="#">Home</a></li>
    <li id="characters"><a href="#">Characters</a>
        <ul>
          <li id="subzero"><a href="#">Sub-Zero</a></li>
          <li id="scorpion"><a href="#">Scorpion</a></li>
          <li id="kano"><a href="#">Kano</a></li>
        </ul>
    </li>
    <li id="about"><a href="#">About</a></li>
    <li id="contact"><a href="#">Contact</a></li>
  </ul>
</body>
</html>

And the problematic CSS code to it:

ul { /* Sets out the dimensions of the unordered list. */
  font-family:Verdana;
  font-size: 17px; 
  margin: 0px;
  padding: 0px; 
  list-style:none;
  position:absolute;
  letter-spacing:1px;
} 

ul li { /* All list items of unordered lists. */  
  display: block;
  position: relative; 
  text-align:center;
  float: left; /* Makes the navigation bar horizontal instead of vertical. */ 
} 

li ul { 
  display: none; /* Hides the dropdown menu list items by default. */ 
}

ul li a { /* All list items of unordered lists that are links. */ 
  color: #ffffff; 
  background: #000000;
  display:block;
  text-decoration: none;
  border-top: 1px solid #ffffff; 
  padding: 7px 40px 7px 40px; 
  margin-left: 0px; 
  white-space: nowrap; 
} 

ul li a:hover { 
  -moz-transition-property:background-color;
  -moz-transition-duration:400ms;
  -moz-transition-timing-function:ease-in-out; 
  color:#ffffff;
  background: #ff0000;
  } 

li:hover ul { 
  display:block;
  width:182px; 
} 

li:hover li {
  display:block; 
  font-size:10px; 
  float:none;
}

li:hover a { 
  background: #000000;   /* This is where you apply the colour you want for the dropdown list items off the main menu. */
} 

li:hover li a:hover { 
  color: #ffffff;
  background: #ff0000;   /* This is where you apply the colour you want for the hover over the list. */
}

Thanks in advance to anyone who can help me with what I want to do here, it really is very much appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    OK. So. Answer 1.

    instead of putting the transition property on the specific selector, try just making a selector like this:

    .trans {
    -webkit-transition:  all 300ms linear;
    -moz-transition:     all 300ms linear;
    -ms-transition:      all 300ms linear;
    transition:          all 300ms linear; 
}

    Then you can apply class=”trans” in your html anchor tags.

    The reason why the transition is only happening on “in” and not “out” – is because you only have it applied to :hover. You would need to apply it to both the regular selector and the :hover state.

    The above was is clean and in short form, But sometimes you’ll want different transition times.

    In that case:

    .my-thing {
    -webkit-transition:  all 300ms linear;
    -moz-transition:     all 300ms linear;
    -ms-transition:      all 300ms linear;
    transition:          all 300ms linear; 
}

.my-thing:hover {
    -webkit-transition:  all 600ms linear;
    -moz-transition:     all 600ms linear;
    -ms-transition:      all 600ms linear;
    transition:          all 600ms linear; 
}

    Answer 2.

    You can delay a transition. In your case the transition from display:none to block.

    .delay {
    transition-delay: 300s;
    -moz-transition-delay: 300s;
    -webkit-transition-delay: 300s;
    -o-transition-delay: 300s;
}

    So you could apply this to the sub ul or something.

    In general, I would rethink your selectors. It looks like in your excitement you have made things more complicated then they need to be.

    Check out this jsFiddle.

    To animate the drop-down, you might need java script. I can’t seem to get a transition on display:none to block. But check out the fiddle. I think it answers your questions and shows examples of both above solutions. Good luck!

    • 0