<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .MenuItem{list-style: none;float: left;display: block;} .MenuItem a{color:beige;background: #000;} a, .MenuItemChildItem>a { float: left; color: #fff; padding: 10px 0px 10px 0px; text-align: center; font: 15px "微軟雅黑", Arial, Helvetica, sans-serif; cursor: pointer; width: 170px; } .MenuItem>a:hover { background-color: #252525; } .MenuItem:first-child>a { -webkit-border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; border-radius: 5px 0 0 0; } .MenuItem:hover #MenuMark { width: 100%; } #MenuItemChild { margin: 0; visibility:hidden; padding: 0; width: 100%; float: left; } #MenuItemChild>li>a { background-color: #333; } .MenuItemChildItem { list-style: none; color: #fff; -webkit-perspective: 300px; -moz-perspective: 300px; -ms-perspective: 300px; -o-perspective: 300px; perspective: 300px; } .MenuItemChildItem>a { border-bottom: 1px solid #222222; border-top: 1px solid #555555; -webkit-transform: rotateY(90deg); transition-duration: 0.5s; -webkit-perspective: 400px; -moz-perspective: 400px; -ms-perspective: 400px; -o-perspective: 400px; perspective: 400px; opacity:0; } .MenuItem:hover #MenuItemChild{ visibility:visible; } .MenuItemChildItem>a:hover { background-color: #252525 !important; } .MenuItem:hover #MenuItemChild>li:nth-child(1)>a { opacity: 1; -webkit-transform: rotateY(0deg); } .MenuItem:hover #MenuItemChild>li:nth-child(2)>a { opacity: 1; transition-delay: 0.2s; -webkit-transform: rotateY(0deg); } .MenuItem:hover #MenuItemChild>li:nth-child(3)>a { opacity: 1; transition-delay: 0.4s; -webkit-transform: rotateY(0deg); } .MenuItem:hover #MenuItemChild>li:nth-child(4)>a { opacity: 1; transition-delay: 0.5s; -webkit-transform: rotateY(0deg); } .MenuItem:hover #MenuItemChild>li:nth-child(5)>a { opacity: 1; transition-delay: 0.6s; -webkit-transform: rotateY(0deg); } .MenuItem:hover #MenuItemChild>li:nth-child(6)>a { opacity: 1; transition-delay: 0.8s; -webkit-transform: rotateY(0deg); } </style></head><body><ul> <li><a>菜單1</a> <div id="MenuMark"></div> <ul id="MenuItemChild"> <li><a>菜單1-1</a></li> <li><a>菜單1-2</a></li> <li><a>菜單1-3</a></li> <li><a>菜單1-4</a></li> <li><a>菜單1-5</a></li> <li><a>菜單1-6</a></li> </ul> </li> <li><a>菜單2</a> <div id="MenuMark"></div> <ul id="MenuItemChild"> <li><a>菜單2-1</a></li> <li><a>菜單2-2</a></li> <li><a>菜單2-3</a></li> <li><a>菜單2-4</a></li> <li><a>菜單2-5</a></li> <li><a>菜單2-6</a></li> </ul> </li> <li><a>菜單3</a> <div id="MenuMark"></div> <ul id="MenuItemChild"> <li><a>菜單3-1</a></li> <li><a>菜單3-2</a></li> <li><a>菜單3-3</a></li> <li><a>菜單3-4</a></li> <li><a>菜單3-5</a></li> <li><a>菜單3-6</a></li> </ul> </li> <li><a>菜單4</a> <div id="MenuMark"></div> <ul id="MenuItemChild"> <li><a>菜單4-1</a></li> <li><a>菜單4-2</a></li> <li><a>菜單4-3</a></li> <li><a>菜單4-4</a></li> <li><a>菜單4-5</a></li> <li><a>菜單4-6</a></li> </ul> </li> <li><a>菜單5</a> <div id="MenuMark"></div> <ul id="MenuItemChild"> <li><a>菜單5-1</a></li> <li><a>菜單5-2</a></li> <li><a>菜單5-3</a></li> <li><a>菜單5-4</a></li> <li><a>菜單5-5</a></li> <li><a>菜單5-6</a></li> </ul> </li> <li><a>菜單6</a> <div id="MenuMark"></div> <ul id="MenuItemChild"> <li><a>菜單6-1</a></li> <li><a>菜單6-2</a></li> <li><a>菜單6-3</a></li> <li><a>菜單6-4</a></li> <li><a>菜單6-5</a></li> <li><a>菜單6-6</a></li> </ul> </li> <li><a>菜單7</a> <div id="MenuMark"></div> <ul id="MenuItemChild"> <li><a>菜單7-1</a></li> <li><a>菜單7-2</a></li> <li><a>菜單7-3</a></li> <li><a>菜單7-4</a></li> <li><a>菜單7-5</a></li> <li><a>菜單7-6</a></li> </ul> </li></ul></body></html>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
