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>

Answer 2

您可以通过多种方式将CSS文件包含到项目中。有关如何执行此操作，请参阅Three Ways to Insert CSS。

最简单的可能是在项目中包含外部样式表

<head>
    <link rel="stylesheet" type="text/css" href="menu.css">
</head>

然后您可以将菜单样式添加到此文件

.mainmenu {

}
.mainmenu ul {

}
.mainmenu li {

}
.staticItem
{
    background-color:maroon;
    color:white;
    font-size:18px;
    font-family: "High Tower Text";
    font-weight:bold;
    padding:2px 10px 2px 19px;
    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);
}
.staticItem:hover
{            
    background-color:#FFFF66;
    color:maroon;
    background-position:right;
    background-image:url('Images/Go_hover.png');
    box-shadow:2px 3px 3px rgba(61,00,00,.5) inset;     
    border-width:1px;
    padding-left:10px;
    padding-right:19px;
}

依旧......

Answer 3

您可能需要考虑使用jquery.com

如何设置ASP样式：使用CSS菜单

3 个答案: