Question

I am wanting to use settimeout to delay the closing of the menu slightly so they don’t disappear quite so fast on mouseout. I know the syntax would be setTimeout(‘some action’, 350); however since it’s css, I’m not sure where to apply the mouseout and what the function would be. http://jsfiddle.net/hCVjK

Here is the html:

<div id="navigation">
    <ul class="top-level">
        <?php $query = "select * from categories";                              
        $categories = mysql_db_query ($dbname, $query, $link); 
        while ($row= mysql_fetch_array($categories)) { ?>
        <li><a href="<?php echo $site_url;?>/<?php echo $row['category_url'];?>.php"><?php echo $row['category_name'];?></a>
            <ul class="sub-level">
                <?php $query = "select * from subcategories WHERE category_number = '".$row['category_number']."' ORDER BY subcategory_name ASC";
                $subcategories = mysql_db_query ($dbname, $query, $link); 
                while ($row2= mysql_fetch_array($subcategories)) { ?>
                <li><a href="<?php echo $site_url;?/subcat_lookup.php?c=<?php echo $row['category_number'];?>&s=<?php echo $row2['subcategory_name'];?>"><?php echo $row2['subcategory_name']; ?></a></li>
                <?php }?>
                <li><a href="<?php echo $site_url;?>/<?php echo $row['category_url'];?>.php">View all for <?php echo $row['category_name'];?></a></li>
            </ul>
        </li><?php }?>
    </ul>
</div>

Here is the CSS:

#navigation {  position:absolute;font-size:0.75em; width:214px;top:115px;}
#navigation ul {margin:0px; padding:0px;}
#navigation li {list-style: none;} 
/* FIRST LEVEL TEXT/BACKGROUND/BORDER SETTINGS */
ul.top-level {background:#fff;}
ul.top-level li {
 font-family: arial, sans-serif;
 font-size:14px;
 font-weight:bold;
 border:1px solid #D2D2D2; border-color:#fff #A5A5A5 #A5A5A5 #A5A5A5;
background:#fff url(images/arrow.gif) no-repeat center right;
}
/* FIRST LEVEL TEXT COLOR */
#navigation a {
 text-align:left;
 display:block;
 color: #<?php echo $tab_color;?>;
 cursor: pointer;
 line-height: 25px;
 text-indent: 10px;
 text-decoration:none;
 width:214px;
}
/* FIRST LEVEL TEXT HOVER COLOR */
#navigation a:hover{
 text-decoration:none;
}
/* FIRST LEVEL HOVER BACKGROUND COLOR */
#navigation li:hover {
 background-color:#<?php echo $tab_color;?>;
 position: relative;
}
#navigation li{
 background-color:#FFF;
 position: relative;
}
/* SECOND LEVEL TEXT SETTINGS */
ul.sub-level li a{
    font-family: arial, sans-serif;
    font-size:12px;
    font-weight:normal;
    background-color:#FFF;
}
ul.sub-level {
    display: none;
}
li:hover .sub-level {
    position: absolute;
    display: block;
    background: #FFF;
    border: #A5A5A5 solid;
    border-width: 1px;
/* set the sub menu flyout position here */
    left: 207px;
    top: -15px;
    z-index:10;
}
/* SECOND LEVEL TEXT HOVER COLOR */
#navigation ul li ul li a:hover{
 color:#FF6633;
 text-decoration:underline;
}
#navigation ul ul{
    padding-top:5px;
    padding-bottom:5px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
     box-shadow: 0px 3px 10px #B0B0B0;
}
#navigation ul li ul li a{
     text-indent: 20px;
     line-height: 17px;
}
ul.sub-level li {
    background:#fff;
    border:none;
    float:left;
}
/* FIRST LEVEL HOVER BACKGROUND COLOR WHEN IN CHILD NODE*/
#navigation li:hover > a{
    color:#fff;
}

Answer 1

I modified your fiddle. Here is a jQuery solution. http://jsfiddle.net/hCVjK/3/

$('ul.sub-level').css('display', 'none'); 

$('ul.top-level > li').hover(function(){
    $(this).find('> ul').show(); 
}, function(e){
    var t = e.relatedTarget.nodeName; 
    if(t === 'LI' || t === 'A'){
        $(this).find('> ul').hide();
    }else{
        $(this).find('> ul').fadeOut('fast');
    }
}); ​

I also changed li:hover .sub-level { to .sub-level { in your css