如何风格ASP：用CSS菜单 [英] How to style ASP:Menu with CSS

问题描述

我有亲创建一个语法垂直菜单，我想使用CSS，但无法找到如何做到这一点很多信息它的风格。

我想菜单是垂直的和子菜单在同一栏中显示，而不是飞了出去，所以当有人悬停在父项，子项将显示在它下面和preferably移动其他父项的出路。

这是我到目前为止的样式：

 ＆LT; ASP：菜单ID =菜单1=服务器的CssClass =MainMenu的＆GT;＆LT; StaticMenuItemStyle的CssClass =staticItem/＆GT;
    ＆LT; / ASP：菜单＆gt; .staticItem：哈弗
    {
        背景颜色：＃FFFF66;
        颜色：栗色;
        宽度：105px;
        宽度：100％;
        填充左：5像素;
        背景位置：右;
        背景重复：不重复;
        背景图像：网址（图像/ Go_hover.png'）;
        箱阴影：2px的的3px的3px RGBA（61,00,00，.5）插图;
        边框：1px的＃610000固体;
        填充左：10px的;
        填充右：19px;
    }    .staticItem
    {
        背景色：栗色;
        颜色：白色;
        字体大小：18像素;
        FONT-FAMILY：高塔文本;
        字体重量：大胆的;
        填充顶：2px的;
        填充底：2px的;
        填充左：19px;
        填充右：10px的;
        宽度：100％;
        背景位置：左;
        背景重复：不重复;
        背景图像：网址（图像/ Go.png'）;
        边界：2px的＃610000固体;
        光标：指针;
        边界半径：5像素;
        箱阴影：的3px的3px 10px的RGBA（61,00,00，0.8）;
    }
 

解决方案

 ＆LT; ASP：菜单ID =NavigationMenu=服务器的CssClass =菜单的EnableViewState =假IncludeStyleBlock =false的方向=横向＆GT;    ＆LT; / ASP：菜单＆gt;
 

然后我有填充用C＃code此菜单，使用下面的CSS类

 ＆LT;风格＆GT;
div.menu
{
     填充：.4px 0像素4PX 0像素;
}
div.menu UL
{
   列表样式：无;
   保证金：0像素;
   填充：0像素;
   宽度：汽车;
}
div.menu UL李李UL
{
  显示：块;
  宽度：250像素;
}
div.menu UL李一，div.menu UL李一：参观
{
背景颜色：＃465c71;
边框：1px的＃4e667d固体;
颜色：＃dde4ec;
显示：块;
行高度：1.35em;
填充：20像素4PX;
文字修饰：无;
空格：NOWRAP;
}
div.menu UL李
{
保证金：0 0 0像素;
 }
div.menu UL李一：悬停
{
       背景颜色：＃bfcbd6;
        颜色：＃465c71;
        文字修饰：无;
 }
div.menu UL李一：主动
{
        背景颜色：＃465c71;
          颜色：＃cfdbe6;
        文字修饰：无;
}
＆LT; /风格＆GT;
 

I have a vertical menu that I create pro grammatically and I would like to style it using CSS but can't find much info on how to do that.

I would like the menu to be vertical and for sub menus to show within the same bar rather than a fly out, so when someone hovers over a parent item, the child items will show below it and preferably move the other parent item out of the way.

This is all I have so far for styling:

<asp:Menu ID="Menu1" runat="server" CssClass="mainmenu" >

<StaticMenuItemStyle CssClass="staticItem" />
    </asp:Menu>

 .staticItem:Hover
    {            
        background-color:#FFFF66;
        color:maroon;
        width:105px;
        width:100%;
        padding-left:5px;
        background-position:right;
        background-repeat:no-repeat;
        background-image:url('Images/Go_hover.png');
        box-shadow:2px 3px 3px rgba(61,00,00,.5) inset;     
        border:1px #610000 solid;
        padding-left:10px;
        padding-right:19px;
    }

    .staticItem
    {
        background-color:maroon;
        color:white;
        font-size:18px;
        font-family: "High Tower Text";
        font-weight:bold;
        padding-top:2px;
        padding-bottom:2px;
        padding-left:19px;
        padding-right:10px;
        width:100%;
        background-position:left;
        background-repeat:no-repeat;
        background-image:url('Images/Go.png');
        border:2px #610000 solid;
        cursor:pointer;
        border-radius:5px;
        box-shadow:3px 3px 10px rgba(61,00,00,.8);
    }

解决方案

 <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">

    </asp:Menu>

then i have fill this menu with c# code and use following css class

<style> 
div.menu
{
     padding: .4px 0px 4px 0px;
}
div.menu ul
{
   list-style: none;
   margin: 0px;
   padding: 0px;
   width: auto;
}
div.menu ul li ul li
{
  display:block;
  width:250px;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li 
{
margin:0 0 0px;
 }
div.menu ul li a:hover
{
       background-color: #bfcbd6;
        color: #465c71;
        text-decoration: none;
 }
div.menu ul li a:active
{
        background-color: #465c71;
          color: #cfdbe6;
        text-decoration: none;
}
</style> 

这篇关于如何风格ASP：用CSS菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！