如何樣式化ASP：使用CSS的菜單

我有一個垂直菜單，我可以用語法創建，我想用CSS來設計它，但找不到有關如何做到這一點的更多信息。如何樣式化ASP：使用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); 
    }

來源

2013-11-26 connersz

-3

你可能要考慮使用jquery.com

來源

2013-11-27 04:51:23

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

來源

2013-11-27 05:05:05

您可以通過多種方式將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; 
}

等等...

來源

2013-11-27 05:14:49

如何樣式化ASP：使用CSS的菜單

回答

相關問題