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比较好，这样样式比较好控制，也不至于受微软绑架。。。。。