CSS drop-down menu: z-index issue - css

Question

I've got two problems with my CSS drop-down menu: JSFiddle
1) Transitions: Would like the menu to slide-down when the mouse switches to it to open it. The previously opened menu should slide-up to close.
#nav ul li ul
{
-webkit-transition:height .5s ease-in;
-moz-transition:height .5s ease-in;
-o-transition:height .5s ease-in;
-ms-transition:height .5s ease-in;
transition:height .5s ease-in;
}
This doesn't seem to work; possibly under the wrong "ul li" selector, though I tried others.
2) Bring the parent item ("Menu1", "Menu2") on top of the menu item list so that it covers the top border of the first child. That is, there should be no border between "Menu1" and "Item1" since "Menu1" doesn't have a bottom border, but looks like it does since "Item1" is on top of it.
Tried playing with z-index, but can't get it working. Neither the transitions.
I realize the menu is a bit convoluted and probably has more CSS than necessary.

Answer 1

What about it? JSFiddle
#nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav ul li {
display: inline-block;
border: 1px solid #FFF;
border-bottom: 0;
border-radius: 5px;
margin: 0 15px;
position: relative;
-webkit-transition: border-color 0.2s ease-in;
-moz-transition: border-color 0.2s ease-in;
-o-transition: border-color 0.2s ease-in;
-ms-transition: border-color 0.2s ease-in;
transition: border-color 0.2s ease-in;
}
#nav ul li a {
color: #8799B3;
display: block;
padding: 10px 6px;
border: 0;
-webkit-transition: color 0.2s ease-in;
-moz-transition: color 0.2s ease-in;
-o-transition: color 0.2s ease-in;
-ms-transition: color 0.2s ease-in;
transition: color 0.2s ease-in;
}
#nav ul li:hover {
color: #415161;
border-color: #E9E9E9;
}
#nav ul li a:hover {
color: #415161;
}
#nav ul li ul {
opacity: 0;
visibility: hidden;
text-decoration: none;
line-height: 1;
color: #8799B3;
background: #FFF;
position: absolute;
top: calc(100% - 5px);
left: -1px;
z-index: 1000;
width: 165px;
border: 0;
}
#nav ul li:hover ul {
opacity: 1;
visibility: visible;
}
#nav ul li ul li {
border: 0;
display: block;
font-size: 14px;
margin: 0;
-webkit-transition: background 0.2s ease-in;
-moz-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in;
-ms-transition: background 0.2s ease-in;
transition: background 0.2s ease-in;
}
#nav ul li ul li:hover {
border: none;
color: #415161;
background: #F7F9FB;
}
#nav ul li ul li a {
padding: 10px;
border: none;
color: #8799B3;
border-left: 1px solid #E9E9E9;
border-right: 1px solid #E9E9E9;
border-bottom: 1px solid #E9E9E9;
}
#nav ul li ul li:first-child a {
border-top: 1px solid #E9E9E9;
border-radius: 0 5px 0 0;
}
#nav ul li ul li:last-child a {
border-bottom: 1px solid #E9E9E9;
border-radius: 0 0 5px 5px;
}
#nav ul li ul {
-webkit-transition: opacity 0.2s ease-in;
-moz-transition: opacity 0.2s ease-in;
-o-transition: opacity 0.2s ease-in;
-ms-transition: opacity 0.2s ease-in;
transition: opacity 0.2s ease-in;
}
<div id="nav">
<ul>
<li>
Menu1
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</li>
<li>
Menu2
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</li>
<li>
Menu3
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</li>
</ul>
</div>