Menu problem

[live627]

So I've been working on my custom theme and want to get the drop down menus to animate top margin on hover, like on Wedge.

Koodi [Valitse] Laajenna

ul.nav {
margin: 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul.nav img {
vertical-align: middle;
}
ul.nav a {
padding: 1em;
color: #000;
}
ul.nav a:hover {
text-decoration: none;
}
ul.nav li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
background: #fafafa;
padding: 1em;
cursor: pointer;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
ul.nav li:hover {
background: #aaa;
}
ul.nav li:hover ul {
}
ul.nav li ul {
left: 0;
position: absolute;
margin-top: 2em;
width: 19em;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
z-index: 190;
transition: opacity 0.15s ease 0s, margin 0.3s ease 0s;
}
ul.nav li ul ul {
margin-left: 17em;
top: 0;
}
ul.nav li ul li {
background: #eee;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul.nav li ul li:hover { background: #aaa; }
ul.nav li:hover > ul {
display: block;
opacity: 1;
visibility: visible;
margin-top: 1em;
}
ul.nav li li.subsections > a:after {
color: #fff;
position: absolute;
right: 2px;
font: 83.33%/150% Arial, sans-serif;
content: '\25ba';
}
/* Highlighting of current section */
ul.nav a.chosen {
font-weight: bold;
}

margin-top starts at 2em and ends at 1em
.dropmenu => .nav

[Antechinus]

You need the transition on the hover state too.

[live627]

Added to ul.nav li:hover > ul and no change

[Antechinus]

Try this:

Koodi [Valitse] Laajenna

.nav {
margin: 0;
list-style: none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

.nav li {
position: relative;
display: inline-block;
margin-right: -4px;
padding: 1em;
background: #fafafa;
font: bold 12px/18px sans-serif;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}

.nav li:hover {
background: #aaa;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}

.nav img {
vertical-align: middle;
}

.nav a {
padding: 1em;
color: #000;
}

.nav a:hover {
text-decoration: none;
}

.nav li ul {
position: absolute;
top: 100%;
left: 0;
margin-top: 2em;
width: 19em;
display: block;
opacity: 0;
z-index: -9;
transition: opacity 0.15s ease 0s, margin 0.3s ease 0s;
}

.nav li ul ul {
margin-left: 17em;
top: 0;
}

.nav li ul li {
background: #eee;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}

.nav li:hover>ul {
z-index: 90;
opacity: 1;
margin-top: 1em;
transition: opacity 0.15s ease 0s, margin 0.3s ease 0s;
}

.nav li .subsections>a:after {
position: absolute;
right: 2px;
font: 83.33%/150% Arial, sans-serif;
color: #fff;
content: '\25ba';
}

/* Highlighting of current section */
.nav .chosen {
font-weight: bold;
}

That should work, AFAICT.

[live627]

It does. ty

[Antechinus]

TBh the change of z-index seems to be what did it. Couldn't get it working with the display: none/block; biz, but once I switched it to a z-index shift it was fine. No idea why (maybe something buggy in transitions support).

This is good BTW, since using a z-index shift is generally better for a11y, and makes it easier to arrange a non-js fallback for keyboard users (if you want to do that).