Need help? Check out our Support site, then


Apply a transition to the unfold of submenu using CSS

  1. This one is driving me cracy.

    in my site: lecturassumergidas.com

    When hover in the first item - left one - in main horzontal menu, a vertical, two columns Submenu, unfolds. I´m trying to apply a transition to the unfold of the submenu, to make it more eye pleasant, but nothing i try works.

    Any help please would be really apreciated.

    Thanks in advance.

    The blog I need help with is lecturassumergidas.com.

  2. I've tried a couple things that did not work, but I'm checking with some of my team mates on this. Hopefully I can get back to you shortly.

  3. Thanks a lot Thesacred...

  4. You have a lot going on with your current CSS! So it took a little time to work through an example.

    I found a way to slide the background down on hover and fade in the submenu. Keep experimenting! Here are the suggestions I came up with, and you should take it from here:

    Find this block:

    .main-navigation a:hover {
    	font-family: "Arimo", "arial", "sans-serif" !important;
    	font-weight:400 !important;
    	color:#000 !important;
    	color:#000 !important;
    	transform:rotate(0deg) scale(1.2) skew(0deg) translate(0px, -1px); -webkit-transform:rotate(0deg) scale(1.2) skew(0deg) translate(0px, -1px); -moz-transform:rotate(0deg) scale(1.2) skew(0deg) translate(0px, -1px); -o-transform:rotate(0deg) scale(1.2) skew(0deg) translate(0px, -1px); -ms-transform:rotate(0deg) scale(1.2) skew(0deg) translate(0px, -1px);
    }

    And remove all of the transforms. I don't think they're needed and they may have just been making the submenu links jumpy.

    Same goes for the transforms in this block:

    .main-navigation .sub-menu a:hover {
    	font-family: "Arimo", "arial", "sans-serif" !important;
    	font-weight:400 !important;
    	color:#4599C3 !important;
    	box-shadow:#333 0 1px 9px;
    	color:#4599C3 !important;
    	transform:rotate(0deg) scale(1) skew(0deg) translate(0px); -webkit-transform:rotate(0deg) scale(1) skew(0deg) translate(0px); -moz-transform:rotate(0deg) scale(1) skew(0deg) translate(0px); -o-transform:rotate(0deg) scale(1) skew(0deg) translate(0px); -ms-transform:rotate(0deg) scale(1) skew(0deg) translate(0px);
    }

    Update the ".submenu" block to this:

    .sub-menu {
    	background:rgba(69, 153, 195, 0.87) !important;
    	border: none;
    	margin: 0 !important;
    	padding: 0 !important;
    	-webkit-border-radius:6px 6px 6px 6px;
    	-moz-border-radius:6px;
    	border-radius: 6px 6px 6px 6px;
    }

    And add this to the bottom of your custom CSS:

    .main-navigation ul li:first-child ul {
    	border: none;
    	display: block;
    	height: 0;
    	opacity: 0;
    	transition: all 1s ease;
    }
    .main-navigation ul li:first-child:hover ul {
    	height: 1200px;
    	opacity: 1;
    }
    .main-navigation ul li:first-child ul li {
    	display: none;
    }
    .main-navigation ul li:first-child:hover ul li {
    	display: block;
    }

    This should give you a good start in case you want to keep experimenting. It's cool that you're working on some more advanced and neat looking CSS3!

  5. Sometimes been thousands of miles away is a problem cos don´t let, at least for me, express a big "THANKS!" the way it should be. Brilliant Designsimply. Simply perfect. It works!!! and looks great!!...

    All my gratitude to both of you, Desigsimply and Thesacred.

    P.S I don´t want to abuse of your time but let me, please, ask you a little more thing:

    Is there a way to apply a slight delay in the unfold of the submenu. I mean: something like half a second between the mouse pointer is over the option and the unfold of the related submenu?

    A million of Thanks to both of you. Trust me, a million.

  6. I get it with the small delay in hover...

    .main-navigation ul li:first-child:hover ul {
    height: 978px;
    opacity: 1;
    transition-delay:.2s;

    }

    Well. I´m really happy!!!!! designsimply, amazing usefull your help. Tons of thanks.

  7. @designsimply is my idol. She is soooo good. I've been working on this and hadn't made a lot of progress.

  8. Cetrainly, she is brilliant!!!

Topic Closed

This topic has been closed to new replies.

About this Topic