Hi

 I'm having problems with styling my Menu control. Specifically, I have the following two problems:

1) For some reason I'm getting extra blank white space in all dynamic menus (first image in the following screenshot)

2) When the mouse hovers over a static item and the drop down dynamic menus appear, I want to sustain the "hover" effect imposed on the top level static menu even if the mouse is moved to the sub items. (notice how  the hover effect on "Clients" is lost when the mouse pointed to first sub item ("Add Client")

For reference, I'm using the following code to declare my menu:

1    	<asp:menu id="mnuNav" runat="server" accesskey="f" cssclass="menu-strip" datasourceid="SiteMapDataSource1"
2                    orientation="Horizontal">
3                    <levelselectedstyles>
4                        <asp:menuitemstyle cssclass="menu-level1-selected" font-underline="False" />
5                        <asp:menuitemstyle cssclass="menu-level2-selected" font-underline="False" />
6                        <asp:menuitemstyle cssclass="menu-level2-selected" font-underline="False" />
7                        <asp:menuitemstyle cssclass="menu-level2-selected" font-underline="False" />
8                        <asp:menuitemstyle cssclass="menu-level2-selected" font-underline="False" />
9                    </levelselectedstyles>
10                   <levelmenuitemstyles>
11                       <asp:menuitemstyle cssclass="menu-level1" font-underline="False" />
12                       <asp:menuitemstyle cssclass="menu-level2" font-underline="False" />
13                       <asp:menuitemstyle cssclass="menu-level2" font-underline="False" />
14                       <asp:menuitemstyle cssclass="menu-level2" font-underline="False" />
15                       <asp:menuitemstyle cssclass="menu-level2" font-underline="False" />
16                   </levelmenuitemstyles>
17                   <dynamichoverstyle cssclass="menu-level2-hover" />
18                   <levelsubmenustyles>
19                       <asp:submenustyle cssclass="menu-level1-submenu" font-underline="False" />
20                       <asp:submenustyle cssclass="menu-level2-submenu" font-underline="False" />
21                       <asp:submenustyle cssclass="menu-level2-submenu" font-underline="False" />
22                       <asp:submenustyle cssclass="menu-level2-submenu" font-underline="False" />
23                       <asp:submenustyle cssclass="menu-level2-submenu" font-underline="False" />
24                   </levelsubmenustyles>
25                   <statichoverstyle cssclass="menu-level1-hover" />
26               </asp:menu>

 And the following is the styles defined in my style sheet:

1    /***************************************************/
2    /* menu bar styles */
3    #menu-container
4    {
5        padding: 3px;
6        background: #124265 url(images/bg-menu.gif) repeat-x;
7        border-bottom: 2px solid #7F7F7F;
8    }
9    .menu-strip
10   {
11       font-size: 1.0em;
12       margin: 0px;
13       vertical-align: middle;
14       height: 25px;
15   }
16   /* all levels styles */
17   .menu-level1, .menu-level2, .menu-level3
18   {
19       padding: 3px;
20       margin: 0px;
21   }
22   .menu-level1 a:link, .menu-level1 a:visited, .menu-level1 a:hover, .menu-level1 a:active
23   {
24       color: White;
25   }
26   
27   /* menu level 1 styles */
28   .menu-level1
29   {
30       font-weight: bold;
31       padding: 3px;
32       margin: 0px;
33   }
34   .menu-level1-selected
35   {
36       background: #124265 url(images/bg-menu-down.gif) repeat-x;
37       border: solid 1px #124265;
38   }
39   .menu-level1-hover
40   {
41       background-color: #ffffcc;
42       border-top: solid 1px #124265;
43       border-left: solid 1px #124265;
44       border-right: solid 1px #124265;
45   }
46   .menu-level1-hover a:link, .menu-level1-hover a:visited, .menu-level1-hover a:hover, .menu-level1-hover a:active
47   {
48       color:Black;
49   }
50   
51   /* menu level 2 styles */
52   .menu-level2-submenu
53   {
54       border-bottom: solid #124265 2px;
55       border-left: solid #124265 1px;
56       border-right: solid #124265 2px;
57       margin: 0px;
58       padding: 0px;
59       
60   }
61   .menu-level2
62   {
63       background-color: #ffffcc;
64       font-weight: bold;
65       padding: 3px;
66       margin: 0px;
67       width: 100%;
68       
69   }
70   .menu-level2-selected
71   {
72       background-color: #ffffcc;
73   }
74   .menu-level2-hover
75   {
76       background: #124265 url(images/bg-header.gif) repeat-x;   
77   }
78   .menu-leve2 a:link, .menu-level2 a:visited, .menu-level2 a:hover, .menu-level2 a:active
79   {
80       color:Black;
81   }
82   .menu-level2-hover a:link, .menu-level2-hover a:visited, .menu-level2-hover a:hover, .menu-level2-hover a:active
83   {
84       color:white;
85   }

Any help would be much appreciated.

 Thanks!

Hi

 I assume you have already sorted this, but just in case;

 There is a spelling mistake on line 78 of your CSS that is causing un-clicked links to show white.

 Cheers

Jared

I am also puzzled why this hover effect was implemented like this. Who would want it this way?

I'll keep lookin and post back if I find an answer, but I believe that answer is called 3rd party controls.  I also would like the menus to have a nifty slide-out effect. I used to have a nice thing called FastMenu from PowerUpASP but they went under and the control doesn't work in VS2005. Bummer.

 Has anyone figured this out yet? I'm having same issue with trying to sustain the hover over affect on the static level items when hovering over dynamic level items...

I like your Menu can you post the image files from your original post.

 I recommend using CSS Friendly Control Adapters.  You can find them here: Go to releases tab and download the dll and the browsers file.  Put the DLL in your Bin folder and the browsers file in App_Browsers folder.  It will render the menu by default as an Unordered List with CSS classes on everything.  You can modify this output if you open the source, if you wish.  These render a really nice semantic menu with far fewer problems and has the benefit of being able to use the plethora of CSS menus out there....