仿照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>
显示效果
