This is a migrated thread and some comments may be shown as answers.

Menu height resizing on mouse over

1 Answer 116 Views

This is a migrated thread and some comments may be shown as answers.

sri asked on 04 Mar 2009, 05:04 AM

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;*/
}

1 Answer, 1 is accepted

answered on 06 Aug 2011, 07:28 PM

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;

}

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Menu height resizing on mouse over

1 Answer, 1 is accepted