<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Title> drop-down menu </title> <Meta http-equiv = "content-Type" content = "text/html; charset = UTF-8"> <Style type = "text/css"> . Navi ul { Padding: 0; List-style-type: none; } . Navi ul li { Text-align: center; Float: left; Position: relative; Width: 200px; Background-color: # 0F8CFF; } A { Color: #086808; Text-decoration: none; } . Navi ul li { Display: block; Border: 1px solid # fff; } . Navi ul li ul { Display: none; Left: 0; } . Navi ul li ul { Position: absolute; Left: 200px; Top: 0; } . Navi ul li: hover ul { Color: yellow; } </Style> <Script type = "text/javascript"> Function showNextMenu (obj ){ Var nextMenu = obj. getElementsByTagName ("ul") [0]; NextMenu. style. display = "block "; } Function hideNextMenu (obj ){ Var nextMenu = obj. getElementsByTagName ("ul") [0]; NextMenu. style. display = "none "; } </Script> </Head> <Body> <Div class = "navi"> <Ul> <Li class = "li_1" onmousemove = "showNextMenu (this);" onmouseout = "hideNextMenu (this);"> <A href = "javascript:;"> games </a> <Ul> <Li onmousemove = "showNextMenu (this);" onmouseout = "hideNextMenu (this);"> <A href = "javascript:;"> legend </a> <Ul> <Li> <A href = "javascript:;"> 1 </a> </Li> <Li> <A href = "javascript:;"> 2 </a> </Li> <Li> <A href = "javascript:;"> 3 </a> </Li> </Ul> </Li> <Li> <A href = "javascript:;"> legend </a> </Li> <Li> <A href = "javascript:;"> legend </a> </Li> <Li> <A href = "javascript:;"> legend </a> </Li> <Li> <A href = "javascript:;"> legend </a> </Li> </Ul> </Li> <Li class = "li_1"> <A href = "javascript:;"> games </a> <Ul> <Li> <A href = "javascript:;"> legend </a> </Li> </Ul> </Li> <Li class = "li_1"> <A href = "javascript:;"> games </a> <Ul> <Li> <A href = "javascript:;"> legend </a> </Li> </Ul> </Li> <Li class = "li_1"> <A href = "javascript:;"> games </a> <Ul> <Li> <A href = "javascript:;"> legend </a> </Li> </Ul> </Li> </Ul> </Div> </Body> </Html> |