Menu height resizing on mouse over

2 posts, 0 answers
  1. sri
    sri avatar
    1 posts
    Member since:
    Mar 2009

    Posted 03 Mar 2009 Link to this post

    Hi,

    I have some submenus off a main structure.  The code is below.  When I mouseover back and forth from the main menu to the submenu the overall menu height keeps changing. It shrinks when I move towards the submenu and gets back to original size when I come back to the main menu.  This is a sample HTML I put together, the issue happens when I move between "View" and "Recent" back to Searches in the main menu.  The CSS I am using is at the bottom of the HTML.

    Sri


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head><title>
    
    </title><link id="Link1" href="css/Main.css" rel="Stylesheet" type="text/css" /><link href="/MenuControlWebApp/WebResource.axd?d=evYtvo20YR9hnsrP1j0caH19zB40cSCQTuHdEl37YrCSlO4BQ0zWC6oHgLMkSbPU0&amp;t=633710915156718750" type="text/css" rel="stylesheet" class="Telerik_stylesheet" /><link href="/MenuControlWebApp/WebResource.axd?d=evYtvo20YR9hnsrP1j0caH19zB40cSCQTuHdEl37YrCttVAaPUcdwLXgeKMP55OaCtfAPBLhQnecrSaCzbORfA2&amp;t=633710915156718750" type="text/css" rel="stylesheet" class="Telerik_stylesheet" /></head>
    <body>
        <form name="form1" method="post" action="default.aspx" id="form1">
    <div>
    <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
    <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwNDcxOTg2NTIPZBYCAgMPZBYCAgEPFCsAAhQrAAIPFgIeF0VuYWJsZUFqYXhTa2luUmVuZGVyaW5naGQQFgNmAgECAhYDFCsAAmRkFCsAAmRkFCsAAmQQFgRmAgECAgIDFgQUKwACZGQUKwACZBAWAmYCARYCFCsAAmRkFCsAAmRkDxYCZmYWAQV0VGVsZXJpay5XZWIuVUkuUmFkTWVudUl0ZW0sIFRlbGVyaWsuV2ViLlVJLCBWZXJzaW9uPTIwMDguMy4xMDE2LjM1LCBDdWx0dXJlPW5ldXRyYWwsIFB1YmxpY0tleVRva2VuPTEyMWZhZTc4MTY1YmEzZDQUKwACZGQUKwACZGQPFgRmZmZmFgEFdFRlbGVyaWsuV2ViLlVJLlJhZE1lbnVJdGVtLCBUZWxlcmlrLldlYi5VSSwgVmVyc2lvbj0yMDA4LjMuMTAxNi4zNSwgQ3VsdHVyZT1uZXV0cmFsLCBQdWJsaWNLZXlUb2tlbj0xMjFmYWU3ODE2NWJhM2Q0DxYDZmZmFgEFdFRlbGVyaWsuV2ViLlVJLlJhZE1lbnVJdGVtLCBUZWxlcmlrLldlYi5VSSwgVmVyc2lvbj0yMDA4LjMuMTAxNi4zNSwgQ3VsdHVyZT1uZXV0cmFsLCBQdWJsaWNLZXlUb2tlbj0xMjFmYWU3ODE2NWJhM2Q0ZGQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgEFDm5hdmlnYXRpb25NZW51qYqgI5M9vu4gKKZ0YwXpMFTG7gc=" />
    </div>
    
    <script type="text/javascript">
    //<![CDATA[
    var theForm = document.forms['form1'];
    if (!theForm) {
        theForm = document.form1;
    }
    function __doPostBack(eventTarget, eventArgument) {
        if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
            theForm.__EVENTTARGET.value = eventTarget;
            theForm.__EVENTARGUMENT.value = eventArgument;
            theForm.submit();
        }
    }
    //]]>
    </script>
    
    <script src="/MenuControlWebApp/WebResource.axd?d=dUQ6eyHfUxXT-Pc-K1pXog2&amp;t=633392531767031250" type="text/javascript"></script>
    
    
    <script src="/MenuControlWebApp/ScriptResource.axd?d=nsh6bKeP1Nsf0bOYM8puBePWWY7emLcCII6PXF8Pc0s59zPX_PQ6B6prCzOMdel-kOqj9VMd-Zrnr7VgLiNjuDFI8-q7u5bYErh2TtlIeBc1&amp;t=633392535216406250" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
    //]]>
    </script>
    
    <script src="/MenuControlWebApp/ScriptResource.axd?d=nsh6bKeP1Nsf0bOYM8puBePWWY7emLcCII6PXF8Pc0s59zPX_PQ6B6prCzOMdel-gpFzsP0Ff_G5U27Cn8DclDF_8HiJpVUZBdb25OAbdRBUGyRRkY8aZtpWi2UwGB_h0&amp;t=633392535216406250" type="text/javascript"></script>
    <script src="/MenuControlWebApp/ScriptResource.axd?d=eMCWEkDgllH0YualrAqfR3UQfd6g_kMAAHzKTQ4AjJal-P7V_P1VMsvIpGQt90H40&amp;t=633710915156718750" type="text/javascript"></script>
    <script src="/MenuControlWebApp/ScriptResource.axd?d=eMCWEkDgllH0YualrAqfR3UQfd6g_kMAAHzKTQ4AjJbfdqqxD7Ntnz74I8D9i4q38VlzfrOI0uHWrKe1t2F2k0tm5I3oUWwisQXjoxf_vdY1&amp;t=633710915156718750" type="text/javascript"></script>
    
    <script src="/MenuControlWebApp/ScriptResource.axd?d=eMCWEkDgllH0YualrAqfR3UQfd6g_kMAAHzKTQ4AjJaB5yiTLMhrjAt_4QmWoAfEj98R7LIVj3VEaiGlJLfTFvPdX8b2a4mLjsFvZXZSRls1&amp;t=633710915156718750" type="text/javascript"></script>
    <script src="/MenuControlWebApp/ScriptResource.axd?d=eMCWEkDgllH0YualrAqfR3UQfd6g_kMAAHzKTQ4AjJbofaRFIQlinboDZIs6pIMBill9hWYNSGIL6oiwnoh3wkiFIZQMZv5AQz5_b4OfKpE1&amp;t=633710915156718750" type="text/javascript"></script>
    <script src="/MenuControlWebApp/ScriptResource.axd?d=eMCWEkDgllH0YualrAqfR9j7JvyL0AOnQkbGUTjx9JWuJNTdOhr33qYLUeSu7lyX2vPjk1d8sAnmZh4DPhLQlg2&amp;t=633710915156718750" type="text/javascript"></script>
        <div>
            <div id="navigationMenu" class="RadMenu RadMenu_Default main_navigation_menu">
    	<!-- 2008.3.1016.35 --><ul class="rmHorizontal rmRootGroup">
    		<li class="rmItem rmFirst"><a href="#" class="rmLink "><span class="rmText">Home</span></a></li><li class="rmItem"><a href="#" class="rmLink "><span class="rmText">Preview</span></a></li><li class="rmItem rmLast"><a href="#" class="rmLink wArrow"><span class="rmText">View</span></a><div class="rmSlide">
    
    			<ul class="rmVertical rmGroup rmLevel1">
    				<li class="rmItem rmFirst"><a href="#" class="rmLink "><span class="rmText">Folders</span></a></li><li class="rmItem"><a href="#" class="rmLink subMenuArrow"><span class="rmText">Searches</span></a><div class="rmSlide">
    					<ul class="rmVertical rmGroup rmLevel2">
    						<li class="rmItem rmFirst"><a href="#" class="rmLink "><span class="rmText">View</span></a></li><li class="rmItem rmLast"><a href="#" class="rmLink subMenuArrow"><span class="rmText">Recent</span></a></li>
    					</ul>
    				</div></li><li class="rmItem"><a href="#" class="rmLink "><span class="rmText">Bookmarks</span></a></li><li class="rmItem rmLast"><a href="#" class="rmLink "><span class="rmText">Print</span></a></li>
    
    			</ul>
    		</div></li>
    	</ul><input id="navigationMenu_ClientState" name="navigationMenu_ClientState" type="hidden" />
    </div>
        
        <script type="text/javascript">
    //<![CDATA[
    Sys.WebForms.PageRequestManager._initialize('ScriptManager', document.getElementById('form1'));
    Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
    //]]>
    </script>
     
        </div>
        
    
    <script type="text/javascript">
    //<![CDATA[
    Sys.Application.add_init(function() {
        $create(Telerik.Web.UI.RadMenu, {"_skin":"Default","clientStateFieldID":"navigationMenu_ClientState","collapseAnimation":"{\"type\":12,\"duration\":200}","itemData":[{},{},{"items":[{},{"items":[{},{"cssClass":"subMenuArrow"}],"cssClass":"subMenuArrow"},{},{}],"focusedCssClass":"wArrowExpanded","cssClass":"wArrow"}]}, null, null, $get("navigationMenu"));
    });
    Sys.Application.initialize();
    //]]>
    </script>
    </form>
    </body>
    
    </html>
    


    CSS


    .main_navigation_menu
    {
        border:none;
    }

    .main_navigation_menu .rmRootGroup
    {
        padding-left: 0;
        margin-left: 0;
        background-color: #1a144c;
        color: #ffffff;
    }

    .main_navigation_menu .rmHorizontal .rmVertical .rmLink
    {
        width:150px;
        height:25px;
        border-bottom:1px solid #e1e1e1;
        border-top:1px solid #ffffff;
        background-color:#f7f7f7;
        background-image:none;
        padding: 0;
        border-left:none;
        border-right:none;
    }

    .main_navigation_menu .rmHorizontal .rmVertical .dtl_sub_menu_arrow
    {    
        width:150px;
        height:25px;
        font-size:10px;
        font-weight:normal;
        color:#525151;
        text-decoration:none;
        border-bottom:1px solid #e1e1e1;
        border-top:1px solid #ffffff;
        background-color:#f7f7f7;
        background-image:url(../images/naviSubArrow_arrow.gif);
        background-repeat:no-repeat;
        background-position:130px 1px;
        padding:0px;
        border-left:none;
        border-right:none;
    }

    .main_navigation_menu .rmHorizontal .rmVertical .dtl_sub_menu_arrow:hover
    {    
        background-color:#ededed;
        width:150px;
        height:25px;
        font-size:10px;
        font-weight:normal;
        color:#525151;
        text-decoration:none;
        border-bottom:1px solid #e1e1e1;
        border-top:1px solid #ffffff;
        background-color:#f7f7f7;
        background-image:url(../images/naviSubArrow_arrow.gif);
        background-repeat:no-repeat;
        background-position:130px 1px;
        padding:0px;
        border-left:none;
        border-right:none;
    }

    .main_navigation_menu .rmHorizontal .rmVertical .rmLink .rmText
    {
        font-size:10px;
        font-weight:normal;
        color:#525151;
        text-decoration:none;
    }

    .main_navigation_menu .rmHorizontal .rmLink
    {
        background-image: url(../images/top_navi_menu_off.gif);
        background-repeat:repeat-x;
        background-position: 50% top;
        cursor: pointer;
        height:34px;
        float: left;
    }

    .RadMenu_Default .rmHorizontal .rmItem {
            PADDING-BOTTOM: 1px
    }

    .main_navigation_menu .rmHorizontal .rmLink .rmText
    {
        color: #ffffff;
        font-weight:bold;
        font-size:11px;
        text-decoration: none;    
        padding-top: 11px;
    }

    .main_navigation_menu .rmHorizontal .wArrow {
        padding: 0px 15px 0px 0px;
        background-image: url(../Images/top_navi_menuarrow_off.gif);
        background-repeat:repeat-x;
        background-position:right;
    }

    .dtl_main_navigation_menu .rmGroup .rmText
    {
        padding: 0 40px 0 0;
    }

    .main_navigation_menu .rmHorizontal .rmVertical .rmLink:hover
    {
        background-color:#ededed;
        border:none;
    }

    .main_navigation_menu .rmHorizontal .rmLink:hover,
    .main_navigation_menu .rmHorizontal .rmExpanded,
    .main_navigation_menu .rmHorizontal .rmFocused
    {
        background-image: url(../images/top_navi_menu_on.gif);
        border:none;
    }

    .main_navigation_menu .rmHorizontal .wArrow:hover
    {
        background-image: url(../images/top_navi_menuarrow_on.gif);
    }

    .main_navigation_menu .rmHorizontal .wArrowExpanded
    {
        background-image: url(../images/top_navi_menuarrow_on.gif);
    }

    .main_navigation_menu .rmGroup .rmItem,
    .main_navigation_menu .rmGroup .rmLink
    {
        /*background: transparent;*/
    }

  2. Pieter
    Pieter avatar
    3 posts
    Member since:
    Aug 2012

    Posted 06 Aug 2011 Link to this post

    I had the same problem, try the following...

    .RadMenu_Default a.rmItem:hover,
    .RadMenu_Default a.rmFocused,
    .RadMenu_Default a.rmSelected
     {
         color: #000000 !important;
         text-decoration: underline;
         margin-top: 1px !important;
         margin-bottom: 0px !important;
         padding-top: 1px !important;
         padding-bottom: 0px !important;
         border: 0px !important;
     
     }
     
    .RadMenu_Default a.rmLink:hover,
    .RadMenu_Default a.rmFirst:hover,
    .RadMenu_Default a.rmLast:hover
     {
         color: #000000 !important;
         text-decoration: underline;
         margin-top: 0px !important;
         margin-bottom: 0px !important;
         padding-top: 0px !important;
         padding-bottom: 0px !important;
         border: 0px !important;
        
     }

Back to Top