Horizontal Submenu Width and Height Grows

[Parker]

I need to have the horizontal submenu that has the same width as the 1st main level with the items in the submenu 

|  Level 1     Level 1a     Level 1b    Level 1c    Level 1d  |
|            Sublevel 1a1  Sublevel 1a2  Sublevel 1a3          | 

I've manged to get the initial menus to look and work fine. The problem I'm having is if you hover over the Level 1c and then Level 1b the submenu grows in width and height.  The attached images may help to explain better what is happening.


|  Level 1     Level 1a     Level 1b    Level 1c    Level 1d  |
|            Sublevel 1a1  Sublevel 1a2  Sublevel 1a3                     |  width and hieght excedes the boundries.

Here is my code - any help or insight anyone can give is appreciated.

 

<script type="text/javascript">
        function itemOpening(sender, args)
        {
           var SecRow = args.get_item().get_element();
           SecRow.childNodes[1].style.left = - SecRow.offsetLeft + "px" ;

        }
  </script>

<telerik:RadMenu ID="RadMenu1" runat="server" Flow="Horizontal" width="900px" OnClientItemOpened="itemOpening"
    skin="BC2010BLACK" EnableEmbeddedSkins="false" style="float:left;">
    <expandanimation type="InOutQuad" duration="300" />
    <collapseanimation type="InOutQuad" duration="200" />
    <items>
          <telerik:RadMenuItem ID="RadMenuItem43" runat="server" NavigateUrl="~/default.aspx" Text="Home"/>
          <telerik:RadMenuItem runat="server" NavigateUrl="~/OurFirm.aspx" Text="Our Firm" GroupSettings-Flow="horizontal">
          <GroupSettings ExpandDirection="Auto" Flow="Horizontal" width="898"/>
               <Items>
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/FirmCulture.aspx" Text="Firm Culture"/>
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/Innovation.aspx" Text="Innovation"  />
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/Diversity.aspx" Text="Diversity"  />
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/HonorAndAwards.aspx"  Text="Honors and Awards"/>
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/ClientFeatures.aspx"  Text="Client Features"/>
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/CommunityInvolvement.aspx" Text="Community Involvement"/>
               </Items>
          </telerik:RadMenuItem>
          <telerik:RadMenuItem runat="server" NavigateUrl="~/OurServices.aspx" Text="Our Services" GroupSettings-Flow="horizontal"  >
          <GroupSettings ExpandDirection="Auto" Flow="Horizontal" width="898"/>
               <Items>
                    <telerik:RadMenuItem IsSeparator="true"  width="50" runat="server" text="" />
                    <telerik:RadMenuItem runat="server"  NavigateUrl="~/ourServices.aspx" Text="Practice Areas"  />
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/ADR.aspx" Text="Alternative Dispute Resolution" />
                    <telerik:RadMenuItem runat="server"  NavigateUrl="~/OurServices.aspx" Text="Industries Served"  />
               </Items>
          </telerik:RadMenuItem>
          <telerik:RadMenuItem runat="server"  NavigateUrl="~/OurAttorneys.aspx" Text="Our Attorneys"  GroupSettings-Flow="horizontal">
          <GroupSettings ExpandDirection="Auto" Flow="Horizontal" width="898"  />
               <Items>
                    <telerik:RadMenuItem IsSeparator="true"  width="60" runat="server" text="" />
                    <telerik:RadMenuItem  runat="server" NavigateUrl="~/attorneysbypractice.aspx" Text="by Practice" />
                    <telerik:RadMenuItem  runat="server" NavigateUrl="~/attorneysbyindustry.aspx" Text="by Industry" />
                    <telerik:RadMenuItem  runat="server" NavigateUrl="~/attorneyalphalist.aspx" Text="by Last Name"/>
                    <telerik:RadMenuItem  runat="server" NavigateUrl="~/attorneysbyoffice.aspx" Text="by Office"/>
                    <telerik:RadMenuItem  runat="server" NavigateUrl="~/OurAttorneys.aspx" Text="Search" />
               </Items>
          </telerik:RadMenuItem>
          <telerik:RadMenuItem runat="server"  NavigateUrl="~/OurOffices.aspx"  Text="Our Offices"  GroupSettings-Flow="horizontal">
               <GroupSettings ExpandDirection="Auto" Flow="Horizontal" width="898"  />
               <Items>
                    <telerik:RadMenuItem IsSeparator="true"  width="20" runat="server" text="" />
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/office.aspx?ID=1" Text="Boca Raton"/>
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/office.aspx?ID=8" Text="Destin"/>
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/office.aspx?ID=2" Text="Fort Lauderdale"/>
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/office.aspx?ID=3" Text="Miami"/>
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/office.aspx?ID=4" Text ="Orlando"/>
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/office.aspx?ID=5" Text="Tallahassee"/>
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/office.aspx?ID=6" Text="Tampa"/>
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/office.aspx?ID=7" Text="West Palm Beach" />
               </Items>
          </telerik:RadMenuItem>
          <telerik:RadMenuItem runat="server"  NavigateUrl="~/MediaCenter.aspx" Text ="Media Center"/>

          <telerik:RadMenuItem ID="RadMenuItem12" runat="server" NavigateUrl="~/EventsandPublications.aspx" Text ="Events and Publications" GroupSettings-Flow="horizontal">
                <GroupSettings ExpandDirection="Auto" Flow="Horizontal" width="898"  />
                <Items>
                 <telerik:RadMenuItem IsSeparator="true"  width="420" runat="server" text="" />
                    <telerik:RadMenuItem runat="server"  NavigateUrl="~/caseupdates.aspx" Text="Case Updates"  />
                    <telerik:RadMenuItem runat="server"  NavigateUrl="~/events.aspx" Text="Events"/>
                    <telerik:RadMenuItem runat="server"  NavigateUrl="~/pressreleases.aspx" Text="Press Releases"/>
                    <telerik:RadMenuItem runat="server"  NavigateUrl="~/publications.aspx" Text="Publications"/>
               </Items>
          </telerik:RadMenuItem>
          <telerik:RadMenuItem runat="server"  NavigateUrl="~/Careers.aspx" Text ="Careers">
               <GroupSettings ExpandDirection="Auto" Flow="Horizontal"  width="898"/>
               <Items>
                    <telerik:RadMenuItem IsSeparator="true"  width="600" runat="server" text="" />
                    <telerik:RadMenuItem  runat="server"  NavigateUrl="~/careersattorneys.aspx" Text ="Attorneys" />
                    <telerik:RadMenuItem runat="server"  NavigateUrl="~/careerslawstudents.aspx" Text="Law Students"    />
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/careersstaff.aspx" Text="Staff"/>
              </Items>
          </telerik:RadMenuItem>
  </items>
</telerik:RadMenu>

[Parker]

I'm "dead in the water" until I can get this resolved. Does anyone have any ideas? 

[Kamen Bundev]

Hi Parker,

Can you somehow send also the skin along with any images you use in it? I'm asking for them because without a skin the sub menus stay the same width and don't change.

Best wishes,
Kamen Bundev
the Telerik team

[Parker]

No images.  Here is the skin file...

/* RadMenu Black skin */

.RadMenu_BC2010BLACK
{
 background: #000000;
}

.RadMenu_BC2010BLACK_rtl
{
 text-align: right;
}

.RadMenu_BC2010BLACK_Context
{
 background: none;
 border: 0;
 width:900px;
}

.RadMenu_BC2010BLACK a
{
 text-decoration: none;
}

.RadMenu_BC2010BLACK .rmLink
{
 line-height: 30px;
 text-decoration: none;
 color: #ffffff;
 
 padding-left:3px;
}

.RadMenu_BC2010BLACK .rmLink:focused,
.RadMenu_BC2010BLACK .rmFocused
{
 outline: 0;
}

.RadMenu_BC2010BLACK .rmRootGroup .rmLink:hover,
.RadMenu_BC2010BLACK .rmRootGroup .rmFocused,
.RadMenu_BC2010BLACK .rmRootGroup .rmExpanded
{
 
 color: #000000;
}

.RadMenu_BC2010BLACK .rmRootGroup .rmLink:hover .rmText,
.RadMenu_BC2010BLACK .rmRootGroup .rmFocused .rmText,
.RadMenu_BC2010BLACK .rmRootGroup .rmExpanded .rmText
{
 color:#cab388;
}

.RadMenu_BC2010BLACK .rmGroup .rmLink:hover,
.RadMenu_BC2010BLACK .rmGroup .rmFocused,
.RadMenu_BC2010BLACK .rmGroup .rmExpanded,
.RadMenu_BC2010BLACK .rmGroup .rmLink:hover .rmText,
.RadMenu_BC2010BLACK .rmGroup .rmFocused .rmText,
.RadMenu_BC2010BLACK .rmGroup .rmExpanded .rmText
{
 color:white;
}

.RadMenu_BC2010BLACK .rmRootGroup .rmLink
{
 margin-right: 5px;
 overflow: visible;
}

.RadMenu_BC2010BLACK .rmRootGroup .rmLink .rmText
{
 font: normal 12px Arial, sans-serif;
 margin-right:-1px;
}

* html .RadMenu_BC2010BLACK .rmItem,* html .RadMenu_BC2010BLACK .rmHorizontal .rmLink,* html .RadMenu_BC2010BLACK .rmText{float:left}

* html .RadMenu_BC2010BLACK .rmGroup .rmText,* html .RadMenu_BC2010BLACK .rmVertical .rmText{float:none}

*+html .RadMenu_BC2010BLACK .rmRootGroup .rmLink .rmText
{
 zoom: 1;
}

.RadMenu_BC2010BLACK .rmGroup .rmLink .rmText
{
 font: normal 12px Arial, sans-serif;
}

.RadMenu_BC2010BLACK .rmGroup
{
 background: #cab388;
 border: 1px solid #0b0b0b;
}

.RadMenu_BC2010BLACK .rmHorizontal
{
 height: 30px;
 
}

.RadMenu_BC2010BLACK .rmGroup .rmHorizontal
{
 height: 21px;
 
}

.RadMenu_BC2010BLACK .rmGroup .rmLink
{
 text-decoration: none;
 color: #000000;
 line-height: 18px;
 height: 21px;
 margin: 0;
}

.RadMenu_BC2010BLACK_rtl .rmGroup .rmLink
{
 text-align:center;
 padding-right:0;
}

.RadMenu_BC2010BLACK .rmText
{
 padding:   10px 16px 5px 16px;
}

.RadMenu_BC2010BLACK .rmGroup .rmLink .rmText
{
 padding: 3px  10px  3px 10px;
 font-size: 12px;
 margin-left: 0;
 margin-right: 0;
}

.RadMenu_BC2010BLACK_rtl .rmGroup .rmLink .rmText
{
 padding: 3px 10px 3px  10px;
}

/* <expand arrows styling> */

.RadMenu_BC2010BLACK .rmGroup .rmLink .rmExpandLeft
{
 background: #191919 url(Menu/ArrowExpandRTL.gif) no-repeat left center;
}

.RadMenu_BC2010BLACK .rmGroup .rmLink .rmExpandRight
{
 background: #191919 url(Menu/ArrowExpand.gif) no-repeat right center;
}

.RadMenu_BC2010BLACK .rmGroup .rmLink:hover .rmExpandLeft,
.RadMenu_BC2010BLACK .rmGroup .rmFocused .rmExpandLeft,
.RadMenu_BC2010BLACK .rmGroup .rmExpanded .rmExpandLeft
{
 color: #ccc;
 background: #191919 url(Menu/ArrowExpandHoveredRTL.gif) no-repeat left center;
}

.RadMenu_BC2010BLACK .rmGroup .rmLink:hover .rmExpandRight,
.RadMenu_BC2010BLACK .rmGroup .rmFocused .rmExpandRight,
.RadMenu_BC2010BLACK .rmGroup .rmExpanded .rmExpandRight
{
 color: #ccc;
 background: #191919 url(Menu/ArrowExpandHovered.gif) no-repeat right center;
}

/* </expand arrows styling> */

.RadMenu_BC2010BLACK .rmGroup .rmExpanded
{
 z-index: 11;
}

.RadMenu_BC2010BLACK .rmTopArrowDisabled,
.RadMenu_BC2010BLACK .rmBottomArrowDisabled,
.RadMenu_BC2010BLACK .rmLeftArrowDisabled,
.RadMenu_BC2010BLACK .rmRightArrowDisabled
{
 display: none;
}

.RadMenu_BC2010BLACK .rmTopArrow,
.RadMenu_BC2010BLACK .rmBottomArrow,
.RadMenu_BC2010BLACK .rmLeftArrow,
.RadMenu_BC2010BLACK .rmRightArrow
{
 font-size: 0;
 line-height: 0;
 color: #fff;
}

.RadMenu_BC2010BLACK .rmTopArrow,
.RadMenu_BC2010BLACK .rmBottomArrow
{
 height: 10px;
 
 background: #343434 url(Menu/ArrowScrollUpDown.gif) no-repeat center top;
}

.RadMenu_BC2010BLACK .rmTopArrow
{
 border-top: 1px solid #000;
}

.RadMenu_BC2010BLACK .rmBottomArrow
{
 background-position: center bottom;
 border-bottom: 1px solid #000;
}

.RadMenu_BC2010BLACK .rmLeftArrow,
.RadMenu_BC2010BLACK .rmRightArrow
{
 width: 10px;
 height: 20px;
 margin: 0;
 background: #343434 url(Menu/ArrowScrollLeftRight.gif) no-repeat left center;
}

.RadMenu_BC2010BLACK .rmRightArrow
{
 border-right: 1px solid #000;
 background-position: right center;
}

.RadMenu_BC2010BLACK .rmLeftArrow
{
 border-left: 1px solid #000;
}

.RadMenu_BC2010BLACK .rmRootGroup .rmItem .rmDisabled .rmText,
.RadMenu_BC2010BLACK .rmGroup .rmItem .rmDisabled .rmText
{
 color: #333;
}

.RadMenu_BC2010BLACK .rmRootGroup .rmItem .rmDisabled
{
 background: none;
}

.RadMenu_BC2010BLACK .rmGroup .rmItem .rmDisabled
{
 background-color: #191919;
}

.RadMenu_BC2010BLACK .rmSeparator
{
 background-color: #cab388;
}

.RadMenu_BC2010BLACK .rmHorizontal .rmSeparator
{
 height: 20px;
 
 
 
}

.RadMenu_BC2010BLACK .rmVertical .rmSeparator
{
 
}

.RadMenu_BC2010BLACK .rmLeftImage
{
 margin: 2px 0;
}

.RadMenu_BC2010BLACK .rmRootGroup .rmItem .rmDisabled:hover,
.RadMenu_BC2010BLACK .rmRootGroup .rmItem .rmDisabled:hover .rmText
{
 background: none;
}

 

[Kamen Bundev]

Hi Parker,

Unfortunately I still can't reproduce the issue you're having in all browsers I tested in (IE6-8, Firefox 3.6, Chrome 5). Can you tell me the exact version of RadControls for ASP.NET AJAX you're using? Also do you have any other stylesheets that you load on your pages?

Regards,
Kamen Bundev
the Telerik team