Выпадающее меню CSS - Тайм-аут

0

У меня есть раскрывающееся меню, которое я преобразовал, как вы можете видеть на моем веб-сайте ниже, меню представляет 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>
Теги:

2 ответа

1
Лучший ответ

Решила свой вопрос Нажмите для ответа

Теперь на панели выпадающего меню остается открытым в течение 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();    

});
Поделиться
  • 0
    и если вы удовлетворены ответом upvote
  • 1
    спасибо, у меня пока недостаточно репутации, чтобы подтвердить свой ответ, и сделаю, когда смогу :) Спасибо
1

Для этого вы должны использовать функцию JavaScript setTimeout.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню