效果图：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style> *{ margin:0; padding:0; list-style:none; } ul{ width:1260px; height:30px; position:relative; } li{ float:left; margin-left:10px; background:purple; width:150px; height:30px; color:#fff; } li p{ text-align:center; line-height:30px; } ul li ul{ width:150px; height:390px; position:absolute; top:30px; left:0; } ul li ul li{ margin-top:5px; background:#e7e7e7; width:150px; height:30px; display:none; } ul li:hover{ background:dodgerblue; } ul li:hover ul li{ display:block; } ul li ul li:hover{ background:deepskyblue; } ul li ul li p{ color:black; text-align:center; line-height:30px; } .a{ width:150px; height:100px; position:absolute; top:142px; left:152px; display:none; } .a li{ width:150px; height:30px; margin-top:3px; background:#e7e7e7; } .a li p{ color:#000000; text-align:center; line-height:30px; } ul li ul .k:hover .a{ display:block; } ul li ul .k .a li:hover{ background:lightblue; } </style> <body> <ul> <li> <p>one</p> <ul> <li> <p>a</p> </li> <li> <p>b</p> </li> <li> <p>c</p> </li> <li> <p>d</p> </li> <li class="k"> <p>e</p> <ul class="a"> <li> <p>ea</p> </li> <li> <p>eb</p> </li> <li> <p>pc</p> </li> </ul> </li> <li> <p>f</p> </li> <li> <p>g</p> </li> <li> <p>h</p> </li> <li> <p>i</p> </li> <li> <p>j</p> </li> </ul> </li> <li> <p>two</p> </li> <li> <p>three</p> </li> <li> <p>four</p> </li> <li> <p>five</p> </li> <li> <p>six</p> </li> <li> <p>seven</p> </li> </ul> </body> </html>