Tip: You can modify some of the code before running
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>css Menu--pull-down menu </title> <style type=" Text/css ">/*author:5key.net*/body{ Background-color:white; font-size:12px; Font-family:arial, Helvetica, Sans-serif; margin:0px; padding:0px; Color:white; ul,li{margin:0px; padding:0px;} li{display:inline; List-style-position:outside; Text-align:center; Font-weight:bold; Float:left; List-style-image:none; List-style-type:none; a:link{color: #336601; text-decoration:none; float:left width:100px; padding:3px 5px 0px 5px; a:visited{color: #33660 1; Text-decoration:none; Float:left; padding:3px 5px 0px 5px; width:100px; a:hover{color:white; float:left padding:3px 3px 0px 20px; width:88px; text-decoration:none; Background-color: #539D26 ; } a:active{color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; Background-color: #BD06B4;} #nav {width:600px; height:30px; border-bottom:0px; padding:0px 5px; z-index:100000; Position:absolute; left:0px; top:0px; }. list{line-height:20px; text-align:left padding:4px; font-weight:normal; menu1{width:120px; Height:auto : 6px 4px 0px 0px; border:1px solid #9CDD75; Background-color: #F1FBEC; Color: #336601; padding:6px 0px 0px 0px; Cursor:hand; Overflow-y:hidden; Filter:alpha (opacity=70); -moz-opacity:0.7; z-index:1000; menu2{width:120px height:18px margin:6px 4px 0px 0px background-color: #F5F5F5; color: #999999; border:1px solid #EEE 8DD; padding:6px 0px 0px 0px; Overflow-y:hidden; Cursor:hand; }. AAA {border:1px red solid; background: #9cf; width:500px; height:40px; position:absolute; top:50px;z-index:-10; nnav {position:relative;} . menu21 {width:120px; height:18px margin:6px 4px 0px 0px background-color: #F5F5F5; color: #999999; border:1px solid #EEE8DD; padding:6px 0px 0px 0px; Overflow-y:hidden; Cursor:hand; } </style> </pead> <body> <div class= "Nnav" > <div id= "nav" > <ul> <li CL ass= "Menu21" onmouseover= "this.classname= ' menu1 '" onmouseout= "this.classname= ' menu2 '" "> My home page <div class=" list " > My home <br/> My home <br/> My log <br/> My log <br My albums <br/> My favorites <br/> </div> </li> <li class= "Menu21" onmouseover= "This.classname= ' menu1" "onmouseout=" This.classname= ' menu2 ' "> Community circle <div class=" List "> My Community Circle &L T;br/> My home <br/> My log <br/> My albums <br my collection <br/> </div> </li> <li class= "menu21" onmouseover= "this.classname= ' menu1 '" Onmou seout= "This.classname= ' menu2" > My SMS <div class= "List" >My SMS <br/> My album <br/> My collection <br/> </div> </li> <li class= "Menu21" onmouseover= "this.classname= ' menu1 '" onmouseout= "this.classname= ' menu2 '" "> Account Management <div C lass= "List" > account management <br/> My home <br/> My log <br/> My albums <br Gt My favorites <br/> My log <br/> My albums <br/> My favorites <br/> < /div> </li> </ul> </div> <div class= "AAA" > <object classid= "clsid:d27cdb6e -ae6d-11cf-96b8-444553540000 "Codebase=" http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab# version=7,0,19,0 "width=" 998 "height=" 430 "> <param name=" movie "value=" images/flash.swf "/> <param Name= "Quality" value= "High"/> <embed src= "images/flash.swf" quality= "High" pluginspage= "Http://www.macromedi" A.com/go/getflashplaYer "type=" Application/x-shockwave-flash "width=" 998 "height=" 430 "></embed> </object> </div> &L T;/div> </body> </ptml>
Tip: You can modify some of the code before running
