How to style ASP:Menu with CSS

Question

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

score 3 · Answer 1 · answered Nov 27 '13 at 05:05

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

score 0 · Answer 2 · answered Nov 27 '13 at 05:14

You can include a CSS file into your project in a number of ways. please see Three Ways to Insert CSS on how to do this.

The easiest may be to include an external style sheet in you project

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

you can then add you menu styles to this file

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

and so on...

e-zero · Answer 3 · 2013-11-27T05:28:44.983

-3

You may want to consider using jquery.com

edited Nov 27 '13 at 05:28

answered Nov 27 '13 at 04:51

e-zero

355
3
9
17

How to style ASP:Menu with CSS

3 Answers3

Linked