Web 頁面的菜單

    折騰了好久的菜單，終於弄好了，發現了一個噁心的 東西，asp.net中的menu控件在Framework 3.5中生成Table，在Framework4中生成ul li

    先上一個在3.5中的Menu。。。。。

 
<style type="text/css">

.menuPlace
{
    background-color:Transparent;
    font-family: 宋體;
    font-size: 10px;
    position:relative;
    top:34px;
  
}


.DynamicMenuStyle /*動態菜單矩形區域樣式*/
{
    background-color: white;
    border: solid 1px #ACC3DF;
    padding: 1px 1px 1px 1px;
    text-align: left;
}


.DynamicHoverStyle /*動態菜單項:鼠標懸停時的樣式*/
{
    background-color: #555555; /*#7C6F57;*/
    color: #ffffff;
}


.DynamicSelectedStyle /*動態菜單項:選擇時的樣式*/
{
    /*background-color:Gainsboro;*/
    color: red;
}


.DynamicMenuItemStyle /*動態菜單項樣式*/
{
    padding: 2px 5px 2px 5px;
   
}




.StaticSelectedStyle /*靜態菜單項:選擇時的樣式*/
{
    /*background-color:Gainsboro;*/
    color: red;
}


.StaticMenuItemStyle /*靜態菜單項樣式*/
{
    cursor: hand;
    padding: 2px 5px 2px 5px;
    color: #ffffff;
    background-color::Transparent;
}


.StaticHoverStyle /*靜態菜單項:鼠標懸停時的樣式*/
{
    background-color: #84BCCD; /*#7C6F57;*/
    cursor: hand;
    color: #ffffff;
}
    </style>

 <asp:Menu ID="menuPlace" runat="server" DynamicEnableDefaultPopOutImage="true" class="menu" 
                    DynamicHorizontalOffset="2"  Orientation="Horizontal"
                    StaticSubMenuIndent="10px" DisappearAfter="600" 
    StaticSelectedStyle-CssClass="StaticSelectedStyle"
                    StaticMenuItemStyle-CssClass="StaticMenuItemStyle"
                    StaticHoverStyle-CssClass="StaticHoverStyle"
                    DynamicMenuStyle-CssClass="DynamicMenuStyle"
                    DynamicSelectedStyle-CssClass="DynamicSelectedStyle"
                    DynamicMenuItemStyle-CssClass="DynamicMenuItemStyle"
                    DynamicHoverStyle-CssClass="DynamicHoverStyle">
          
        </asp:Menu>

此處menu是在後臺綁定的，效果圖如下：

再來個在Framework4.0下面的代碼：

<style type="text/css">
div.menu
{
  width:1024px;
  height:32px;   
}

div.menu ul li { line-height:32px;border-right:1px solid #999999;  font-size:large; padding:0 0 0 0;   width:90px;height:32px; }/*設置所有ul li靜態樣式*/
div.menu ul li:hover,div.menu ul li a:hover,div.menu ul li a:active {  color:black; margin-left:0px;  text-align:center;}/*設置所有ul li動態樣式*/
div.menu ul li a 
{
display: block;
float: left;
text-decoration: none;
color:white;
cursor: pointer;
width:90px;height:32px;font-size:12px;text-align:center; word-break:break-all;
	}/*設置所有ul中li a樣式*/
div.menu ul ul{background-color:#B0ACAC; margin:0 0 0 0; }	
div.menu ul ul li { width:90px;height:22px; border-style:none;  margin-left:0px; margin-top:0px; margin-right:0px;  margin-bottom:0px; padding-right:0px; padding-left:0px; padding-top:0px; padding-bottom:0px;  }/*設置二級菜單li 靜態下拉樣式*/
div.menu ul ul li a{color:white;background-color:transparent;height:22px; text-align:left;}/*設置二級菜單li a靜態下拉樣式*/
div.menu ul ul li a:hover{width:90px; background-color:transparent;height:22px;}

 div.menu ul ul ul li{margin-left:0px; margin-top:0px; margin-right:0px;  margin-bottom:0px; } 
    </style> 


 <div>
       <asp:Menu ID="navmenu" runat="server" DynamicEnableDefaultPopOutImage="true" class="menu" 
                    DynamicHorizontalOffset="2" BackColor="#3c89a5"  Orientation="Horizontal"
                    StaticSubMenuIndent="10px" DisappearAfter="600"  >
 
            <Items>
                <asp:MenuItem Text="華南" Value="null" Selectable="false">
                    <asp:MenuItem Text="海南" Value="hainansheng" Selectable="false">
                        <asp:MenuItem Text="海口ssssssssssssssssssss" Value="haikou"></asp:MenuItem>
                        <asp:MenuItem Text="三亞" Value="sanya"></asp:MenuItem>
                        <asp:MenuItem Text="五指山" Value="wuzhishan"></asp:MenuItem>
                    </asp:MenuItem>
                </asp:MenuItem>
                <asp:MenuItem Text="華北" Value="null" Selectable="false">
                    <asp:MenuItem Text="河北" Value="hebeisheng" Selectable="false">
                        <asp:MenuItem Text="石家莊" Value="shijiazhuang"></asp:MenuItem>
                        <asp:MenuItem Text="保定" Value="baoding"></asp:MenuItem>
                        <asp:MenuItem Text="唐山" Value="tangshan"></asp:MenuItem>
                    </asp:MenuItem>
                </asp:MenuItem>
            </Items>
        </asp:Menu>
    </div>

得出結論，菜單還是自己在後臺拼Html比較好，這樣樣式比較好控制，也不至於受微軟綁架。。。。。