Pure css navigation menu code

The code is as follows:

Copy code

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Html xmlns = "http://www.111cn.net/1999/xhtml"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"/> <Style type = "text/css"> # Nav {width: 500px; margin: 0px auto; list-style: none; font-size: 12px; text-align: center; line-height: 26px ;} # Nav li {width: 100px; float: left ;} # Nav li a {display: block; width: 99px; border-bottom: # FFFFFF 1px solid; text-decoration: none; background: #333333; height: 26px; color: # CCCCCC ;} # Nav li a: hover {background: # CCCCCC; color: #333333 ;} # Nav li div {display: none ;} </Style> <Title> simple menu test </title> </Head> <Body> <Ul id = "nav"> <Li> <A href = "#"> Jiangsu </a> <Div class = "child_menu"> <A href = "#"> Nanjing </a> <A href = "#"> Suzhou </a> <A href = "#"> Wuxi </a> <A href = "#"> Changzhou </a> <A href = "#"> Zhenjiang </a> <A href = "#"> Xuzhou </a> </Div> </Li> <Li> <A href = "#"> Zhejiang </a> <Div class = "child_menu"> <A href = "#"> Hangzhou </a> <A href = "#"> Ningbo </a> </Div> </Li> <Li> <A href = "#"> Fujian </a> <Div class = "child_menu"> <A href = "#"> Xiamen </a> <A href = "#"> Fuzhou </a> <A href = "#"> Quanzhou </a> </Div> </Li> <Li> <A href = "#"> Guangdong </a> <Div class = "child_menu"> <A href = "#"> Guangzhou </a> <A href = "#"> Shenzhen </a> <A href = "#"> Dongguan </a> <A href = "#"> Chaozhou </a> </Div> </Li> <Li> <A href = "#"> Shandong </a> <Div class = "child_menu"> <A href = "#"> Qingdao </a> <A href = "#"> Weihai </a> <A href = "#"> Tai'an </a> <A href = "#"> Jinan </a> <A href = "#"> Texas </a> </Div> </Li> </Ul> <Script type = "text/javascript tutorial" src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script> <Script type = "text/javascript"> Var nav_main = $ ("# nav> li> "); Var nav_child =$ ("# nav> li> div "); Nav_main.each (function (I ){ $ (This). mouseover (function (){ Basic. show (I ); }) . Mouseout (function (){ Basic. hidden (I ); }); }); Nav_child.each (function (I ){ $ (This). mouseover (function (){ Basic. show (I ); }) . Mouseout (function (){ Basic. hidden (I ); }); }); Var basic = { Show: function (I) {nav_child.eq (I). show ();}, Hidden: function (I) {nav_child.eq (I). hide ();} } </Script> </Body> </Html>