Dropdown Menu animation only applied on second hover?

Question

Currently have a drop down menu that is activated on a hover (from display:none to display:block in the CSS). It appears that the CSS is performed before the Jquery,however, because on the first hover, the drop down menu is not animated (i.e. it appears instantaneously) but on the second hover the Jquery's slide down and slide up is properly performed. Why isn't the Jquery getting applied on the first hover? I've found a solution that states that adding this line |$('.nav ul li ul').css('display','block').slideUp(0);| to the Jquery solves the issue but it does not for me...bear with my redundancy I'm learning this as I go.

Here is the HTML for the Menu:

<ul class="nav">
    <li><a href="#">...</a></li>
    <li><a href="#">Dropdown1</a>
        <ul>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
        </ul>
    </li>
    <li><a href="#">Dropdown2</a>
        <ul>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
        </ul>
    </li>
    <li><a href="#">...</a></li>
    <li><a href="#">...</a></li>
</ul>

My CSS:

.nav {
font-family: FrutigerLTStd-Roman, Trebuchet MS, Helvetica, Arial, sans-serif; 
font-size:16px; 
font-style: none; 
font-weight: normal; 
margin:0; 
list-style:none;
padding:0px 0px 0px 0px; 
z-index:600; 
text-align:center;
clear: both;
box-shadow: 0px 3px 3px 0px #888
background-clip: padding;
}
.nav a{
color:#FFF
background:#629ec4; 
display: block; 
font-weight: bold;
margin:0 0 0 0;
target-new:tab;
}
.nav li{ 
background:#629ec4;
margin:1px 0 1px 0;
border-top:0px solid;
border-right:0px solid;
border-bottom:0px solid;
z-index: 600;
float:left;
}
.nav li a:hover{
color:#0072bb;
}

.nav li ul{
list-style:none;
display:none;
position:relative;
z-index: 700;
background-color:#629ec4
}

.nav li:hover ul{
display:block;
border-top:2px solid;
}

.nav li:hover ul li {
clear:left;
}

.nav ul li:hover a{
color:#0072bb;
opacity: 1;
}

My Jquery:

$(document).ready(function () {  
    $('.nav ul li ul').css('display','block').slideUp(0);
    $('.nav li').hover(
    function () {
        //show its submenu
        $('ul', this).slideDown(300);
    },
    function () {
        //hide its submenu
        $('ul', this).slideUp(300);        
    }
);
});

Answer 1

I was unable to duplicate the issue you described, however, I made a few modifications in an attempt to clear up the issues you described.

Added class to dropdown ul:

 <li><a href="#">Dropdown1</a>
     <ul class="dropdown">
    ...

Updated CSS:

.nav { 
    font-family: FrutigerLTStd-Roman, Trebuchet MS, Helvetica, Arial, sans-serif;
    font-size:16px;
    font-style: none;
    font-weight: normal;
    margin:0;
    list-style:none; 
    padding:0px 0px 0px 0px;
    z-index:600;
    text-align:center; 
    clear: both; 
    box-shadow: 0px 3px 3px 0px #888;
    background-clip: padding; 
}
.nav a{ 
    color:#FFF; 
    background:#629ec4;
    display: block;
    font-weight: bold; 
    margin:0 0 0 0; 
    target-new:tab; 
}
.nav li{
    background:#629ec4; 
    margin:1px 0 1px 0; 
    border-top:0px solid; 
    border-right:0px solid; 
    border-bottom:0px solid; 
    z-index: 600; 
    float:left; 
}

.nav li a {
    padding: 0 15px 0 15px;   
}

.nav li a:hover{ 
    background:#0072bb; 
    color: #fff;    
}
.nav li:hover .dropdown { 
    display:block; 
    border-top:1px solid; 
}
.dropdown { 
    list-style:none; 
    display:none; 
    position:relative; 
    z-index: 700; 
    background-color:#629ec4;  
}
.dropdown li {
    clear: both; 
    display: block;
    width: 100%;
}
.dropdown li:hover a{ 
    background:#0072bb; 
    color: #fff;
    opacity: 1; 
}

Working solution (slight modifications for illustrative purposes): JSFIDDLE