仿照Metro菜单

<%@ Page Language= " C# " AutoEventWireup= " true " CodeBehind= " TestMetroMenu.aspx.cs "
    Inherits= " MetroWeb.TestMetroMenu "  %>

<! 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  runat ="server" >
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8" >
     < title >MetroMenu </ title >
     < meta  http-equiv ="X-UA-Compatible"  content ="IE=EmulateIE8" >
     < link  rel ="stylesheet"  type ="text/css"  href ="style(1).css" >
     <%--    <script src= " jquery-1.5.1.min.js " type= " text/javascript "></script>
    -- %>
</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < div  class ="hpMst_Stage" >
         < div  class ="hpMst_StageInner" >
             < div  class ="hpMst_Navigation" >
                 < div  class ="hpMst_NavigationBottom" >
                     < div  class ="hpMst_Menu" >
                         < span  id ="ctl00_ctl10"  class ="msMnu"  bi:type ="hpMenu" >
                             < ul  class ="msMnu_Section" >
                                 < li  id ="ctl00_ctl10_ItemsRepeater_ctl00_MenuItem"  class ="msMnu_Item"  bi:index ="0" >
                                     < div  class ="msMnu_ItemLink"  bi:titleflag ="item" >
                                         < a  href ="http://www.allfreights.com/Default.aspx"  id ="ctl00_ctl10_ItemsRepeater_ctl00_ItemLink"
                                            class ="msPopup_Link"  bi:title ="item"  bi:track ="false" >首页  </ a >
                                     </ div >
                                 </ li >
                                 < li  id ="ctl00_ctl10_ItemsRepeater_ctl01_MenuItem"  class ="msMnu_Item"  bi:index ="1" >
                                     < div  class ="msMnu_ItemLink"  bi:titleflag ="item" >
                                         < a  href ="http://www.allfreights.com/Web_BestFreight.aspx"  id ="ctl00_ctl10_ItemsRepeater_ctl01_ItemLink"
                                            class ="msPopup_Link"  bi:title ="item"  bi:track ="false" >运价查询  </ a >
                                     </ div >
                                 </ li >
                                 < li  id ="ctl00_ctl10_ItemsRepeater_ctl02_MenuItem"  class ="msMnu_Item"  bi:index ="2" >
                                     < div  class ="msMnu_ItemLink"  bi:titleflag ="item" >
                                         < a  href ="http://www.allfreights.com/Web_BestEnquiry.aspx"  id ="ctl00_ctl10_ItemsRepeater_ctl02_ItemLink"
                                            class ="msPopup_Link"  bi:title ="item"  bi:track ="false" >货盘查询  </ a >
                                     </ div >
                                 </ li >
                                 < li  id ="ctl00_ctl10_ItemsRepeater_ctl03_MenuItem"  class ="msMnu_Item"  bi:index ="3" >
                                     < div  class ="msMnu_ItemLink"  bi:titleflag ="item" >
                                         < a  href ="http://www.allfreights.com/Web_OpenVessel.aspx"  id ="ctl00_ctl10_ItemsRepeater_ctl03_ItemLink"
                                            class ="msPopup_Link"  bi:title ="item"  bi:track ="false" >空船待货  </ a >
                                     </ div >
                                 </ li >
                                 < li  id ="ctl00_ctl10_ItemsRepeater_ctl04_MenuItem"  class ="msMnu_Item"  bi:index ="4" >
                                     < div  class ="msMnu_ItemLink"  bi:titleflag ="item" >
                                         < a  href ="http://www.allfreights.com/Web_BookingLines.aspx"  id ="ctl00_ctl10_ItemsRepeater_ctl04_ItemLink"
                                            class ="msPopup_Link"  bi:title ="item"  bi:track ="false" >航线订阅  </ a >
                                     </ div >
                                 </ li >
                                 < li  id ="ctl00_ctl10_ItemsRepeater_ctl05_MenuItem"  class ="msMnu_Item"  bi:index ="5" >
                                     < div  class ="msMnu_ItemLink"  bi:titleflag ="item" >
                                         < a  href ="http://www.allfreights.com/MyOffice/OA_Login.aspx"  id ="ctl00_ctl10_ItemsRepeater_ctl05_ItemLink"
                                            class ="msPopup_Link"  bi:title ="item"  bi:track ="false" >我的办公室  </ a >
                                     </ div >
                                 </ li >
                                 < li  id ="ctl00_ctl10_ItemsRepeater_ctl06_MenuItem"  class ="msMnu_Item"  bi:index ="6" >
                                     < div  class ="msMnu_ItemLink"  bi:titleflag ="item" >
                                         < a  href ="http://www.allfreights.com/Web_CompanyList.aspx"  id ="ctl00_ctl10_ItemsRepeater_ctl06_ItemLink"
                                            class ="msPopup_Link"  bi:title ="item"  bi:track ="false" >联盟会员  </ a >
                                     </ div >
                                 </ li >
                             </ ul >
                         </ span >< a  id ="skipmenu" ></ a >
                     </ div >
                     < div  class ="hpMst_NavigationBg" >
                     </ div >
                     < div  class ="cssClear" >
                     </ div >
                 </ div >
             </ div >
             < div  class ="cssClear" >
             </ div >
         </ div >
     </ div >
     </ form >
</ body >

</html> 

显示效果

 

 

 

转载于:https://www.cnblogs.com/litaocnblogs/archive/2012/01/13/2321883.html