Home > Developer > JavaScript
<!doctype html>
<meta charset= "UTF-8" >
<title> Implementing a drop-down list with HTML and CSS </title>
<style>
*{margin:0;padding:0;}
#nav {background-color: #eee; width:500px;height:40px;margin:0 auto;}
Ul{list-style-type:none;}
UL li{float:left;line-height:40px;text-align:center;position:relative;width:100px;}
A{text-decoration:none;color: #000;d isplay:block;height:40px;width:100px;}
A:hover{color: #fff; Background-color: #666;}
UL Li ul li{float:none;border-left:none;background-color: #eee; margin-top:2px;width:100px;}
UL Li Ul{width:90px;position:absolute;left:0px;top:40px;display:none;}
</style>
<script type= "Text/javascript" >
Define a function
function Showsubmenu (LI) {
Find the first UL under Li, Save As submenu
var submenu=li.getelementsbytagname ("ul") [0];
Set the submenu property to display state
submenu.style.display= "Block";
}
function Hidesubmenu (LI) {
var submenu=li.getelementsbytagname ("ul") [0];
Set the submenu property to hidden state
Submenu.style.display= "None";
}
</script>
<body>
<nav id= "NAV" >
<ul>
<li><a href= "#" > Home </a></li>
<!--set onmouseover and Onmousuout events, respectively, call JS in the two functions, the reference is this, here this represents the LI element--
<li onmouseover= "Showsubmenu (This)" onmouseout= "Hidesubmenu (This)" >
<a href= "#" > Course Hall </a>
<ul>
<li><a href= "#" >JavaScript</a></li>
<li><a href= "#" >jquery </a></li>
</ul>
</li>
<li>
<a href= "#" > Learning Center </a>
<ul>
<li><a href= "#" >JavaScript</a></li>
<li><a href= "#" >jquery </a></li>
</ul>
</li>
<li>
<a href= "#" > Classic case </a>
<ul>
<li><a href= "#" >JavaScript</a></li>
<li><a href= "#" >jquery </a></li>
</ul>
</li>
<li>
<a href= "#" > About Us </a>
<ul>
<li><a href= "#" > Contact Us </a></li>
<li><a href= "#" > Latest version </a></li>
</ul>
</li>
</ul>
</nav>
</body>
Using JavaScript to implement a simple drop-down list
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
