ecshop_兼容IE678,FF横向下拉菜单.docVIP

!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无标题文档-SH!/title style type=text/css !-- * {margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #nav { height: 24px; list-style-type: none; padding-left:200px; line-height:24px;overflow:hidden;background:#999; } #nav a { display: block; width: 80px; text-align:center; } #nav a:link { color:#EEE; text-decoration:none; } #nav a:visited { color:#EEE;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold;background:#CCC; } #nav li { float: left; width: 80px; } #nav li ul { line-height: 24px; list-style-type: none; text-align:left; left: -999px; width: 520px; //注意,这里一定要设置宽度; position: absolute; background:#CCC; } #nav li ul li{ float: left;width: 80px; //float就是子菜单横向的关键,可以继承父菜单而省略float } #nav li ul a{ display: block; width: 65px;text-align:left;padding-left:15px; } #nav li ul a:link { color:#F1F1F1; text-decoration:none; } #nav li ul a:visited { color:#F1F1F1;text-decoration:none; } #nav li ul a:hover { color:#FFF;text-decoration:none;font-weight:normal;background:#C00; } #nav li:hover ul { left:25%; } #nav li.sfhover ul { left:25%; } #content { clear: left; } -- /style /head body ul id=nav li onMouseOver=this.className=sfhover onMouseOut=this.className=a href=#菜单一/a ul lia href=#菜单一/a/li lia href=#菜单一/a/li lia href=#菜单一/a/li lia href=#菜单一/a/li lia href=#菜单一/a/li lia href=#菜单一/a/li /ul /li li onMouseOver=this.className=sfhover onMouseOut=this.className=a href=#菜单二/a ul lia href=#菜单二/a/li lia href=#菜单二/a/li lia href=#菜单二/a/li lia href=#菜单二/a/li lia href=#菜单二/a/li /ul /li li onMouseOver=this.className=sfhover onMouseOut=this.className=a href=#菜单三/a ul lia href=#菜单三/a/li lia href=#菜单三/a/li lia href=#菜单三/a/li lia href=#菜单三/a/li lia href=#菜单三/a/li /ul /li l