c# - 如何设置 ASP :Menu with CSS 的样式

Question

我有一个以编程方式创建的垂直菜单，我想使用 CSS 设置它的样式，但找不到关于如何实现的太多信息。

我希望菜单是垂直的，子菜单显示在同一个栏内而不是飞出，所以当有人将鼠标悬停在父项上时，子项将显示在其下方并且最好移动另一个父项让开。

这就是我到目前为止的所有样式:

<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);
    }

Answer 1

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

    </asp:Menu>

然后我用 c# 代码填充这个菜单并使用以下 css 类

<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>