Home > Developer > Web Develop
<!doctype html>
<meta charset= "UTF-8" >
<title> Implementing a drop-down list with HTML and CSS </title>
<style>
/* Style of navigation bar */
*{margin:0;padding:0;}
#nav {background-color: #eee; width:500px;height:40px;margin:0 auto;}
Ul{list-style-type:none;}
UL Li{float:left;width:100px;line-height:40px;text-align:center;position:relative;}
A{text-decoration:none;color: #000;d isplay:block;height:40px;width:100px;}
A:hover{color: #fff; Background-color: #666;}
/* Drop-down menu section */
UL Li Ul{position:absolute;left:0px;top:40px;display:none;}
UL Li ul li{float:none;background-color: #eee; margin-top:2px;}
UL Li ul li a:hover{background-color: #06f;}
/* Implement drop-down menu display */
UL Li:hover Ul{display:block;}
</style>
<body>
<nav id= "NAV" >
<ul>
<li><a href= "#" > Home </a></li>
<li>
<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>
drop-down menus implemented with HTML and CSS
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
