Style Menu

Code:

---

<title>Untitled Page</title>
    <style type="text/css" >
    .StaticMenuItemStyle
    {
    color: #993333;
      font-size : 14px;
    font-weight : bold ;
    text-decoration : none;
    padding-left : 2px;
   
    }
   
    .StaticHoverStyle,.StaticSelectedStyle
    {
            background-color :#c1e4ce;
    }
   
    .DynamicMenuItemStyle
    {
    font-size :14px;
    color : #707070;
    background-color : #cccccc;
    padding : 4px 2px 4px 3px  ;
    }
   
    .DynamicHoverStyle
    {
            background-color :#707070;
            color :White ;
    }
   
         
   
    </style>

---

Code:

---

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" Orientation ="Horizontal"
        StaticMenuItemStyle-CssClass ="StaticMenuItemStyle"
        StaticHoverStyle-CssClass ="StaticHoverStyle"
        StaticSelectedStyle-CssClass ="StaticSelectedStyle"
        DynamicMenuItemStyle-CssClass ="DynamicMenuItemStyle"
        DynamicHoverStyle-CssClass ="DynamicHoverStyle"
        BackColor="#FF9933"
        staticenabledefaultpopoutimage="true" Height ="28px"
                        onmenuitemclick="Menu1_MenuItemClick">
                </asp:Menu>

---

My code is generating o/p as i show in pic.

As U can see in pic when i hover the mouse sales menu item,some part of it is not fully changed..Y it is happening?? I want to change all the part including top part???What to add extra so dat whole is changed to green color including top part.

May be i m not able to understand u my prob clearly,but all are genious,so I hope u get me!

You could explain what you mean by "not fully changed". What are you expecting to happen?

Hey,

I think sonia is referring to the fact that the element container for "Sales" is now coloured cyan, however, there is still a orange background above this element.

Is that right?

Gary

Yes Gep u r right,i want to do dat only!!!! What to do chnages in my code,to implement i!!!

Hey,

Is there a reason you have specifically set the menu to be:

Code:

---

Height ="28px"

---

My first guess, don't have Visual Studio open, would be to remove this. Or, at least, match the CSS style to include this height on your hover/dynamic styles.

Gary

If i do not include the height attribute of menu,then the width of menu is less(See in Pic).But i want to increase the width dats y i include the height attribute.
Hey Gep Sir can u tell me how to include the height on hover dynamic styles?? There is no such attribute,dat i know in CSS?????

Hey,

I wasn't speaking about the width of the element, only the height?!?

What I think would be good for you would be to take a look at the actual html that the menu control renders to the client. This way, it should become clear as to what exactly you need to do.

With your web page open, right click and select View Source. Search the resulting output until you find the area of the page that contains your menu (Search for "Sales", or something similar).

What do you see? Can you paste it here?

You should see the various styles that you have created being applied to the elements, and from there, you can work out what needs to change.

Gary

That seems to be it, it was either that or padding.

Remove the height and in the .DynamicMenuItemStyle class, give it a width.

Code:

---

.DynamicMenuItemStyle
    {
    font-size :14px;
    color : #707070;
    background-color : #cccccc;
    padding : 4px 2px 4px 3px  ;
    width: 55px;
    }

---

First of all HAPPY NEW YEAR 2010 to all the viewers.

Secondly sir,its not working.I want to create menu of same design as shown in pic(attached). When i hover the mouse over the menu item,color changes to orange(see in pic). I want the same menu,what to do changes in my code,to create the same menu.

Why not copy their HTML and modify your menu templates to match individual menu items from their HTML?

Hey,

Are you sure that the CSS that Mendhak provided didn't work? I haven't tried it out myself, but it looks good. Can you post a screen shot of the result?

Gary