Jquery multi-level drop-down menu core code

Jquery
Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ("Ul li"). hover (function (){
$ (This). find ("ul: first"). show (); // hover the mouse over to find the first ul under li and then display it;
}, Function (){
$ (This). find ("ul: first"). hide (); // move the mouse away from the ul that hides d under li;
})
$ ("Ul li ul"). prev (). addClass ("bbb"); // Add css to the previous sibling element of the ul-aaa style under li;
})

Css
Copy codeThe Code is as follows:
Ul, li {padding: 0; margin: 0 ;}
Ul li {float: left; margin-right: 1px; display: inline; list-style: none; text-align: center ;}
Ul li {float: none; background: # ccc; margin-bottom: 1px; display: block; _ display: inline; position: relative ;}
Ul li ul {display: none ;}
Ul a {text-decoration: none; width: 80px; height: 20px; line-height: 20px; display: block; background: # bbb; font-size: 12px}
Ul li a: hover {background: # eee; color: #000}
Ul li. aaa {position: absolute; left: 80px; top: 0; border-left: 1px solid # fff}
Ul li. aaa li {float: none ;}
Body. bbb {background: # f00; color: # fff}

Html
Copy codeThe Code is as follows:
<Ul>
<Li>
<A href = ""> Topic 1 </a>
<Ul>
<Li> <a href = ""> menu 1 </a> </li>
<Li> <a href = ""> menu 1 </a> </li>
<Li> <a href = ""> menu 1 </a> </li>
<Li> <a href = ""> menu 1 </a>
<Ul class = "aaa">
<Li> <a href = ""> menu 3 </a> </li>
<Li> <a href = ""> menu 3 </a>
<Ul class = "aaa">
<Li> <a href = ""> menu 3 </a> </li>
<Li> <a href = ""> menu 3 </a> </li>
<Li> <a href = ""> menu 3 </a>
<Ul class = "aaa">
<Li> <a href = ""> menu 3 </a> </li>
<Li> <a href = ""> menu 3 </a> </li>
<Li> <a href = ""> menu 3 </a>
<Ul class = "aaa">
<Li> <a href = ""> menu 3 </a> </li>
<Li> <a href = ""> menu 3 </a> </li>
<Li> <a href = ""> menu 3 </a> </li>
<Li> <a href = ""> menu 3 </a> </li>
</Ul>
</Li>
<Li> <a href = ""> menu 3 </a> </li>
</Ul>
</Li>
<Li> <a href = ""> menu 3 </a> </li>
</Ul>
</Li>
<Li> <a href = ""> menu 3 </a> </li>
<Li> <a href = ""> menu 3 </a> </li>
</Ul>
</Li>
</Ul>
</Li>
<Li>
<A href = ""> Column 2 </a>
</Li>
<Li>
<A href = ""> column 3 </a>
<Ul>
<Li> <a href = ""> menu 3 </a>
</Li>
<Li> <a href = ""> menu 3 </a>
<Ul class = "aaa">
<Li> <a href = ""> menu 3 </a> </li>
<Li> <a href = ""> menu 3 </a>
<Ul class = "aaa">
<Li> <a href = ""> menu 3 </a> </li>
<Li> <a href = ""> menu 3 </a> </li>
<Li> <a href = ""> menu 3 </a>
<Ul class = "aaa">
<Li> <a href = ""> menu 3 </a> </li>
<Li> <a href = ""> menu 3 </a> </li>
<Li> <a href = ""> menu 3 </a> </li>
<Li> <a href = ""> menu 3 </a> </li>
</Ul>
</Li>
<Li> <a href = ""> menu 3 </a>
<Ul class = "aaa">
<Li> <a href = ""> menu 3 </a> </li>
<Li> <a href = ""> menu 3 </a>
<Ul class = "aaa">
<Li> <a href = ""> menu 3 </a> </li>
<Li> <a href = ""> menu 3 </a> </li>
<Li> <a href = ""> menu 3 </a> </li>
<Li> <a href = ""> menu 3 </a> </li>
</Ul>
</Li>
<Li> <a href = ""> menu 3 </a> </li>
<Li> <a href = ""> menu 3 </a> </li>
</Ul>
</Li>
</Ul>
</Li>
<Li> <a href = ""> menu 3 </a> </li>
<Li> <a href = ""> menu 3 </a> </li>
</Ul>
</Li>
<Li> <a href = ""> menu 3 </a> </li>
<Li> <a href = ""> menu 3 </a> </li>
</Ul>
</Li>
<Li>
<A href = ""> Topic 4 </a>
</Li>
</Ul>