<!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>
Atas ialah kandungan terperinci 纯css3导航. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!