I've got the code bellow and i want it to wait 1 second before showing. Also when it shows and hides, to do it in a transition of about a second. I'm really struggling and the help would be really appreciated.

html:

1.     <ol class="top">
2. <li>
4.       <a href="/link1" class="show">topList1</a>
5.         <div class="sublist" style="left:0px;">
6.             <div class="row">
7.               <ul>
8.                  <li><a href="/list1link" class="head">list1</a></li>
9.                   <ul>
10.             </div>
11.       </div>
12. </li>
14. <li>
15.         <a href="/link2" class="show">topList2</a>
16.             <div class="sublist" style="left:0px;">
17.                   <div class="row">
18.                         <ul>
19.                        <li><a href="/list12ink" class="head">list2</a></li>
20.                         <ul>
21.                   </div>
22.             </div>
23.       </li>
24. </ol>

css:

2. ol.top{ list-style-type: none; margin: 0px; padding: 0px; position:relative; float:left;}
3. ol.top li { float: left; border: 1px solid silver;}
4. div.sublist { display: none; }
5. li:hover a.show + div.sublist { display:block; opacity: 1.0; }
6. a.show:hover + div.sublist { display:block; opacity: 1.0; }
7. div.sublist:hover { display:block; opacity: 1.0; }

It would mean allot if you could do something for me.

Kind regards,

     Glenn - glenn223