纯divcss制作弹出菜单.doc

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title纯div+css制作的弹出菜单/title style type=text/css .menu { font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0; } .menu ul li a, .menu ul li a:visited { display:block; text-decoration:none; color:#000; width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden; } .menu ul { padding:0; margin:0; list-style-type: none; } .menu ul li { float:left; margin-right:1px; position:relative; } .menu ul li ul { display: none; } .menu ul li:hover a { color:#fff; background:#36f; } .menu ul li:hover ul { display:block; position:absolute; top:21px; left:0; width:105px; } .menu ul li:hover ul li a.hide { background:#6a3; color:#fff; } .menu ul li:hover ul li:hover a.hide { background:#6fc; color:#000; } .menu ul li:hover ul li ul { display: none; } .menu ul li:hover ul li a { display:block; background:#ddd; color:#000; } .menu ul li:hover ul li a:hover { background:#6fc; color:#000; } .menu ul li:hover ul li:hover ul { display:block; position:absolute; left:105px; top:0; } .menu ul li:hover ul li:hover ul.left { left:-105px; } .menu ul li a.hide, .menu ul li a:visited.hide { display:none; } .menu ul li a:hover ul li a.hide { display:none; } .menu ul li a:hover { color:#fff; background:#36f; } .menu ul li a:hover ul { display:block; position:absolute; top:21px; left:0; width:105px; } .menu ul li a:hover ul li a.sub { background:#6a3; color:#fff; } .menu ul li a:hover ul li a { display:block; background:#ddd; color:#000; } .menu ul li a:hover ul li a ul { visibility:hidden; } .menu ul li a:hover ul li a:hover { background:#6fc; color:#000; } .menu ul li a:hover ul li a:hover ul { visibility:visib