More in this section

Forums / Developing with Sitefinity / RadMenu Mouseover Issue

RadMenu Mouseover Issue

3 posts, 1 answered
  1. Saumitra
    Saumitra avatar
    127 posts
    10 Mar 2009
    30 Dec 2009
    Link to this post

    We've used RadMenu for the primary navigation in one of the websites we've developed for our client. We've also used custom styling using custom CSS to visually represent the menu as per the requirements. But we are facing a small issue when we hover the mouse over the child items in the menu. The issue is that as soon as we take the cursor over the child items, we see additional child items getting added to the list titled " &nbsp". We've struggled a lot but are unable to trace it further. Attached is the screenshot highlighting the issue.

    Following is the code from SiteMenu.ascx:
    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" /> 
    <telerik:RadMenu ID="RadMenu1" runat="server" DataSourceID="SitemapDataSource1" OnItemDataBound="RadMenu1_ItemDataBound" 
        DefaultGroupSettings-Flow="Horizontal" DefaultGroupSettings-Width="1965px" DefaultGroupSettings-Height="20px" 
        EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" Style="top: 0px; display: inline; left: 0px;">  

    CSS classes being used for the menu:
    .topnav01 ul{margin:0;padding:0;list-style-type:none;}  
    .topnav01 ul li{margin-right:2px;float:left;}  
    .topnav01 ul li a{background:url(../images/navinactive_left.gif) no-repeat left top;padding-left:12px;display:block}  
    .topnav01 ul li a span{background:url(../images/navinactive_right.gif) no-repeat rightright top;padding:11px 12px 10px 0;font-size:12px;font-weight:bold;line-height:12px;color:#d42c1f;display:block}  
    .topnav01 ul li a:hover{color:#fff;text-decoration:none;background:url(../images/navactive_left.gif) no-repeat left top;}  
    .topnav01 ul li a:hover span{color:#fff;text-decoration:none;background:url(../images/navactive_right.gif) no-repeat rightright top;}  
    .topnav01 ul li a.lftcurve_act{background:url(../images/navactive_left.gif) no-repeat left top;}  
    .topnav01 ul li a.lftcurve_act span{background:url(../images/navactive_right.gif) no-repeat rightright top;font-size:12px;font-weight:bold;line-height:12px;color:#fff}  
    .topnav01 ul li div{margin:0;padding:4px 10px 4px 10px;background:#0072bc;width:983px;position:absolute;left:0px;top:33px;display:none}  
    .topnav01 ul li div.rmSlide{width:983px}  
    .topnav01 ul li div ul{width:983px;display:block;margin:0;padding:0;list-style-type:none;}  
    .topnav01 ul li div ul li{margin-right:0px;float:left;width:auto;}  
    .topnav01 ul li div ul li a{background:#0072bc none;color:#fff;padding-left:0;}  
    .topnav01 ul li div ul li a span{background:#0072bc none;padding:5px 8px 5px 8px;font-size:11px;font-weight:normal;color:#fff}  
    .topnav01 ul li div ul li a:hover, .topnav01 ul li div ul li a:hover span{background:#378dc6 none;color:#fff;text-decoration:none

    Please let me know where are we going wrong.


  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    01 Feb 2016
    30 Dec 2009
    Link to this post
    Hello Saumitra,

    Thank you for using our services.

    The I have taken a look at the styles which you have provided. The issue appears to be that the menu control does not have style rules for the following classes - rmLeftArrowDisabled, rmTopArrowDisabled, rmBottomArrowDisabled, rmRightArrowDisabled since the default style sheet has been disabled. You can fix this if you apply the bellow style rules to your CSS styles:
    .RadMenu .rmLeftArrowDisabled,
    .RadMenu .rmTopArrowDisabled,
    .RadMenu .rmBottomArrowDisabled,
    .RadMenu .rmRightArrowDisabled
        font-size: 0;
        line-height: 0;

    This fixed the issue on my end.

    All the best,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Saumitra
    Saumitra avatar
    127 posts
    10 Mar 2009
    30 Dec 2009
    Link to this post
    Hi Georgi,

    Yes, that was THE issue. Thanks a lot for the solution.

Register for webinar
3 posts, 1 answered