<! Doctype HTML>
<HTML lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> </title>
<Style type = "text/CSS">
* {Margin: 0; padding: 0 ;}
Ul {list-style: none ;}
Li {float: Left; width: 150px; position: relative ;}
Li {float: none ;}
Li ul {display: none; position: absolute; top: 30px ;}
Li a {display: block; Background: # Eee; line-Height: 30px; text-align: center; color: #666 ;}
Li A: hover {Background: # 3cf ;}
</Style>
</Head>
<Body>
<Ul class = "nav">
<Li>
<A href = ""> menu </a>
<Ul class = "A">
<Li> <a href = ""> sub-menu </a> </LI>
<Li> <a href = ""> sub-menu </a> </LI>
<Li> <a href = ""> sub-menu </a> </LI>
<Li> <a href = ""> sub-menu </a> </LI>
</Ul>
</LI>
<Li>
<A href = ""> menu </a>
<Ul class = "A">
<Li> <a href = ""> sub-menu </a> </LI>
<Li> <a href = ""> sub-menu </a> </LI>
<Li> <a href = ""> sub-menu </a> </LI>
<Li> <a href = ""> sub-menu </a> </LI>
</Ul>
</LI>
<Li>
<A href = ""> menu </a>
<Ul class = "A">
<Li> <a href = ""> sub-menu </a> </LI>
<Li> <a href = ""> sub-menu </a> </LI>
<Li> <a href = ""> sub-menu </a> </LI>
<Li> <a href = ""> sub-menu </a> </LI>
</Ul>
</LI>
</Ul>
<SCRIPT src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
$ (Function ()
{
$ (". Nav"). Children ("Li: Has (UL)"). Hover (function (){
$ (This). Children ("Ul"). Show ();
}, Function (){
$ (This). Children ("Ul"). Hide ();
});
});
</SCRIPT>
</Body>
</Html>
$(document).ready(function () {$('#nav li').hover(function () {//show its submenu$('ul', this).slideDown(100);}, function () {//hide its submenu$('ul', this).slideUp(100);});});
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
