CSS Drop Down Menu - Timeout

Question

I have a drop down menu that I have converted as you can see on my website below, the menu is Submit a selfie.
What I want to do is when you hover your mouse over the submit a selfie it stays open for 10 seconds.
I have tried various elements of code to get this to work but it closes as soon as your mouse moves away from the menu that appeared.

Any clues?

Thanks

David

http://sandybeachit.x10.mx/hosting/sinderbox

Style sheet:

<style> 
#layer1 {position:absolute; top:75px; right: 75px}
#layer2 {position:absolute; top:75px; left: 60px}
#layer3 {position:absolute; top:75px; left: 55px}
</style>
<STYLE>body,input{font-family:Calibri,Arial}.text-label{color:#cdcdcd;font-weight:normal}</STYLE>
<style>
/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;
    color: #black;
    background: #FFFFFF;
    padding: 5px;
    display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 40px;
    left: 0;
    width: 200px;
        text-decoration: none;
    color: #black;
    background: #FFFFFF;
    padding: 5px;
    border: 1px solid #CECECE;
}
ul#menu li:hover ul.sub-menu {
    display:block;
}
.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
</style>

This is my html code which operate as a drop down menu:

<div id="layer1"> <ul id="menu">
    <li><IMG align="right" SRC="submit_selfie.jpg">

        <ul class="sub-menu">
            <li>

               <div class="error_box"></div> <?php // http://verifyjs.com ?>

<form id="form1" name="submit_selfie_form" method="post" action="submit_a_selfie_approval.php" enctype="multipart/form-data"> <table border="0" cellspacing="0" cellpadding="5"> <tr> <td>1</td> <td><input name="username" type="text" size="15" maxlength="50" type="text" title="# Username" data-validate="required,min(6)"></td> </tr> <tr> <td>2</td> <td> <!-- <input name="file" type="file" data-validate="required">
--> <div class="fileUpload btn btn-primary">
    <span>Upload Selfie Image</span>
    <input name="file" type="file" data-validate="required" class="upload" /> </div></td> </tr> <tr> <td>3</td> <td>

<select name="age" data-validate="required"> <option value="">Age</option> <option value="#14_years">14</option> <option value="#15_years">15</option> <option value="#16_years">16</option> <option value="#17_years">17</option> <option value="#18_years">18</option> <option value="#19_years">19</option> <option value="#20_years">20</option> <option value="#21_years">21</option> <option value="#22_years">22</option> <option value="#23_years">23</option> <option value="#24_years">24</option> <option value="#25_years">25</option> <option value="#26_years">26</option> <option value="#27_years">27</option> <option value="#28_years">28</option> <option value="#29_years">29</option> <option value="#30_years">30</option> <option value="#31_years">31</option> <option value="#32_years">32</option> <option value="#33_years">33</option> <option value="#34_years">34</option> <option value="#35_years">35</option> <option value="#36_years">36</option> <option value="#37_years">37</option> <option value="#38_years">38</option> <option value="#39_years">39</option> <option value="#40_years">40</option> <option value="#41_years">41</option> <option value="#42_years">42</option> <option value="#43_years">43</option> <option value="#44_years">44</option> <option value="#45_years">45</option> <option value="#46_years">46</option> <option value="#47_years">47</option> <option value="#48_years">48</option> <option value="#49_years">49</option> <option value="#50_years">50</option> <option value="#51_years">51</option> <option value="#52_years">52</option> <option value="#53_years">53</option> <option value="#54_years">54</option> <option value="#55_years">55</option> <option value="#56_years">56</option> <option value="#57_years">57</option> <option value="#58_years">58</option> <option value="#59_years">59</option> <option value="#60_years">60</option> <option value="#61_years">61</option> <option value="#62_years">62</option> <option value="#63_years">63</option> <option value="#64_years">64</option> <option value="#65_years">65</option> <option value="#66_years">66</option> <option value="#67_years">67</option> <option value="#68_years">68</option> <option value="#69_years">69</option> <option value="#70_years">70</option> <option value="#71_years">71</option> <option value="#72_years">72</option> <option value="#73_years">73</option> <option value="#74_years">74</option> <option value="#75_years">75</option> <option value="#76_years">76</option> <option value="#77_years">77</option> <option value="#78_years">78</option> <option value="#79_years">79</option> <option value="#80_years">80</option> </select>

</td> </tr> <tr> <td>4</td> <td><input name="location" type="text" size="15"  title="# Location" maxlength="150" data-validate="required"></td> </tr> <tr> <td>5</td> <td><input name="anything_else" type="text" size="15"  title="# Anything Else" maxlength="150"></td> </tr> <tr> <td></td> <td><input type="submit" value="Submit"></td> </tr> </table> </form> <? // http://jqueryvalidation.org/documentation ?>


            </li>
        </ul>
    </li> </ul> </div>

Answer 1

Solved Your Question Click for Answer

Now on hover Dropdown menu stays open for 10 seconds before closing

HTML

<ul  ><img src="http://placehold.it/50x50"/>
    <li >conten1</li>
    <li >conten2</li>
    <li >conten3</li>
    <li >conten4</li>
    <li>conten5</li>
</ul>    

Css

ul>li{
    list-style:none;
    display:none;
}

Jquery

$( "ul" ).hover(function() {
$( "li" ).show().delay(10000).fadeOut();    

});

Answer 2

You should use JavaScript setTimeout function for that.