1、菜单条
主要代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .a1 { background-color:#F00; width:100px; height:40px; top:100px; left:30%; position:absolute; overflow:hidden; } .a2 { background-color:#F00; width:100px; height:40px; top:100px; left:30%; position:absolute; } .a3 { width:100px; height:120px; top:40px; position:absolute; } .a4 { width:100px; height:40px; background-color:#F3F; overflow:hidden; position:absolute; } .a41 { width:100px; height:40px; background-color:#F3F; position:absolute; } .a5 { background-color:#90C; width:100px; height:40px; top:40px; position:absolute; overflow:hidden; } .a51 { background-color:#90C; width:100px; height:40px; top:40px; position:absolute; } .a6 { background-color:#FF0; width:100px; height:40px; top:80px; position:absolute; overflow:hidden; } .a61 { background-color:#FF0; width:100px; height:40px; top:80px; position:absolute; } .a7 { width:100px; height:120px; left:100%; top:0px; position:absolute; background-color:#36F; } .a8 { width:100px; height:80px; left:100%; top:0px; position:absolute; background-color:#36F; } .a9 { width:100px; height:40px; left:100%; top:0px; position:absolute; background-color:#36F; } </style> </head> <body> <div class="a1" onmouseover="className='a2'" onmouseout="className='a1'"> 搜索引擎 <div class="a3"> <div class="a4" onmouseover="className='a41'" onmouseout="className='a4'"> 百度 <div class="a7"><a href="http://www.baidu.com">baidu</a></div> </div> <div class="a5" onmouseover="className='a51'" onmouseout="className='a5'"> 搜狗 <div class="a8"><a href="www.sougo.com">sougo</a></div> </div> <div class="a6" onmouseover="className='a61'" onmouseout="className='a6'"> 360 <div class="a9"><a href="www.360.com">360</a></div> </div> </div> </div> </body> </html>
结果：
