<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> ul { list-style: none; } a { text-decoration: none; } .fist_menu { text-align: center; } .fist_menu > li { float: left; width: 100px; height: 20px; border: 1px solid silver; background-color: Yellow; cursor: pointer; } .fist_menu > li > ul { margin: 0px; border: 1px solid white; display: none; } .fist_menu > li > ul > li { height: 20px; background-color: Gray; border: 1px solid white; } .fist_menu > li:hover > ul { display: block; } .thirdly_menu { margin-top: -20px; margin-left: 98px; display: none; width: 105px; } .thirdly_menu>li { background-color: Red; border: 1px solid white; } .fist_menu > li > ul > li:hover ul { display: block; } </style> </head> <body> <div> <ul class="fist_menu"> <li><a href="#">A</a> <ul> <li><a href="#">A1</a></li> <li><a href="#">A2</a></li> <li><a href="#">A3</a></li> </ul> </li> <li><a href="#">B</a> <ul> <li><a href="#">B1</a> <ul class="thirdly_menu"> <li><a href="#">B1_1</a></li> <li><a href="#">B1_2</a></li> <li><a href="#">B1_3</a></li> </ul> </li> <li><a href="#">B2</a> <ul class="thirdly_menu"> <li><a href="#">B2_1</a></li> <li><a href="#">B2_2</a></li> <li><a href="#">B2_3</a></li> </ul> </li> <li><a href="#">B3</a> <ul class="thirdly_menu"> <li><a href="#">B3_1</a></li> <li><a href="#">B3_2</a></li> <li><a href="#">B3_3</a></li> </ul> </li> </ul> </li> <li><a href="#">C</a> <ul> <li><a href="#">C1</a></li> <li><a href="#">C2</a></li> <li><a href="#">C3</a></li> </ul> </li> <li><a href="#">D</a> <ul> <li><a href="#">D1</a></li> <li><a href="#">D2</a></li> <li><a href="#">D3</a></li> </ul> </li> <li><a href="#">E</a> <ul> <li><a href="#">E1</a></li> <li><a href="#">E2</a></li> <li><a href="#">E3</a></li> </ul> </li> </ul> </div> </body> </html>