CSS Menu 2 · 前端開發

``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .parent { display: block; position: relative; float: left; line-height: 50px; padding: 0 10px; background-color: #4FA0D8; /*border-right:#CCC 1px solid;*/ } .parent a{ margin: 10px; color: #FFFFFF; text-decoration: none; } .menu .child li { padding: 0 10px; margin: unset; } .child a{ margin: unset; } .parent:hover > ul { display:block; position:absolute; } .child { display: none; } .child li { background-color: #E4EFF7; line-height: 30px; border-bottom:#CCC 1px solid; border-right:#CCC 1px solid; width:100%; } .child li a{ color: #000000; } ul{ list-style: none; margin: 0;padding: 0px; min-width:10em; } ul ul ul{ left: 100%;top: 0; margin-left:1px; } li:hover { background-color: #95B4CA; } .parent li:hover { background-color: #F0F0F0; } .expand{ font-size:12px; float:right; margin-right:5px; } ul.menu { margin: 0 auto; } </style> </head> <body> <ul class="menu"> <li class="parent"><a href="#">Recent Toys</a> </li> <li class="parent"><a href="#">Recent Toys</a> <ul class="child"> <li><a href="#">Yoyo</a></li> <li><a href="#">Doctor Kit</a></li> <li><a href="#">Uno Cards</a></li> </ul> </li> <li class="parent"><a href="#">Toys Category</a> <ul class="child"> <li><a href="#">Battery Toys</a></li> <li class="parent"><a href="#">Remote Toys <span class="expand">»</span></a> <ul class="child"> <li><a href="#">Cars</a></li> <li><a href="#">Aeroplane</a></li> <li><a href="#">Helicopter</a></li> </ul> </li> <li><a href="#">Soft Toys</a> </li> <li><a href="#">Magnet Toys</a></li> </ul> </li> <li class="parent"><a href="#">Toys Category</a> <ul class="child"> <li><a href="#">Battery Toys</a></li> <li class="parent"><a href="#">Remote Toys <span class="expand">»</span></a> <ul class="child"> <li><a href="#">Cars</a></li> <li><a href="#">Aeroplane</a></li> <li class="parent"><a href="#">Remote Toys <span class="expand">»</span></a> <ul class="child"> <li><a href="#">Cars</a></li> <li><a href="#">Aeroplane</a></li> <li><a href="#">Helicopter</a></li> </ul> </li> </ul> </li> <li><a href="#">Soft Toys</a> </li> <li><a href="#">Magnet Toys</a></li> </ul> </li> </ul> </body> </html> ```