Question

我有一个下拉菜单，我已在下面的网站上看到，菜单为Submit a selfie。我想要做的是当你将鼠标悬停在submit a selfie上时，它会保持打开10秒钟我已经尝试了各种代码元素来使其工作，但只要鼠标离开出现的菜单就会关闭。

任何线索？

由于

大卫

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

样式表：

<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>

这是我的html代码，它作为下拉菜单运行：

<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

您应该使用JavaScript setTimeout功能。

Answer 2

Solved Your Question Click for Answer

现在悬停下拉菜单在关闭之前保持打开状态10秒

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();    

});

CSS下拉菜单 - 超时

2 个答案:

HTML

的CSS

Jquery的