Solved

Main Menu Item keeps resizing when it shows submenu

Posted on 2013-10-29
5
546 Views
Last Modified: 2013-10-29
I've converted an excisting site to a joomla template. Now I have a problem with the menu. The item (called: Zumba) is holding a submenu which is shown on mouseover. However, when it shows the submenu it resizes the main menu item. How can I resolve this. The website can be visited at: http://dev.aymo.nl

CSS file for menu:
/* CSS Document */

ul.menu
{
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: normal;
	padding: 0;
	text-align: center;
	display: inline;
/*	margin: 0 0 20px 0; */
}

ul.menu li {
	display: block;
	padding: 0;
	margin: 0;
	height: 55px;
	float: left;
}
ul.menu li a:link,#header ul.menu li a:visited,#header ul.menu li:last-child a
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height:  28px;
	text-decoration: none;
	text-align: center;
	display: block;
	margin: 0 0 0;
	padding-top: 12px;
	padding-right: 32px;
	padding-bottom: 15px;
	padding-left: 32px;

}


ul.menu li:first-child a:hover, #header ul.menu li a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height:  28px;
	text-decoration: none;
	text-align: center;
	display: block;
	margin: 0 0 0;
	color: #FFF !important;
	background-color: #9900FF;
}

ul.menu li.active
{
	background: #6e1a5a;
    -webkit-border-radius: 4px 4px 4px 4px;
	-moz-border-radius: 4px 4px 4px 4px;
	border-radius: 4px 4px 4px 4px;
}

ul.menu li:first-child a {
    padding-top: 12px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 10px;
}

ul.menu li:first-child a:hover
{
    padding-top: 12px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 10px;
}

ul.menu,ul.menu ul {

}

ul.menu a {
	display: block;
	margin: 0;
	text-decoration: none;
	line-height: 55px;
	font-size: 14px;
	text-transform: uppercase;
	color: #bcbec0; !important;
	padding-top: 12px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 10px;
}
ul.menu ul {
	margin: 0;
	padding: 0;
}

ul.menu ul a {
	padding-left: 20px
}


ul.menu ul ul a {
	padding-left: 30px;
	padding-top: 40px;
}

ul.menu ul ul ul a {
	padding-left: 40px
}

ul.menu ul ul ul ul a {
	padding-left: 45px
}




ul.menu ul {
	z-index: 10000;
	background-color: #000;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #751a34;
	border-right-color: #751a34;
	border-bottom-color: #751a34;
	border-left-color: #751a34;
}
ul.menu ul li {
	float: none;
	background-image: none;
	background-color: #390534;
}

ul.menu ul a {
	color: #CCC !important;
	background-image: none;
	zoom: 1; 
	background-color: #390534;
	overflow: hidden;
	font-size: 14px;
	line-height: 55px;
}
ul.menu ul a:hover {
	background-color: #9900ff !important;
	color: #FFF !important;
	background-image: none;
}

li ul {
	display: none;
}

li:hover ul{
	display: block;
}

Open in new window


My index.php:
<?php
  defined( '_JEXEC' ) or die( 'Restricted access' );
  
  $logo				= $this->params->get('logo');
?>
<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
	<jdoc:include type="head" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/fitdans/css/style.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/fitdans/css/menu.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/fitdans/css/breadcrumbs.css" type="text/css" />
</head>

<body onLoad="checkPage()">
<div id="wrapper">

<div id="header">
		<div id="menu">
	       	<jdoc:include type="modules" name="MainMenu"/>
        	</div><!-- end menu -->

	<div id="adbox">
		<?php if ($logo) : ?>
			<img src="<?php echo $this->baseurl ?>/<?php echo htmlspecialchars($logo); ?>" alt="Img" height="496" width="958" />
		<?php else : ?>
			<img src="<?php echo $this->baseurl ?>/templates/fitdans/images/discussing.jpg" alt="Img" height="496" width="958" />
		<?php endif;?>
	</div><!-- end adbox -->
</div><!-- end header -->

<div id="contents_wrapper">
<div id="contents">
	<div id="headline_wrapper">
		<div id="headline">
			<div class="left">
			<!-- InstanceBeginEditable name="Content" -->
			    <h1><jdoc:include type="module" name="breadcrumbs" title="Breadcrumbs" /></h1>
			<!-- InstanceEndEditable -->
			</div><!-- end body -->
			<div class="right">
			<!-- InstanceBeginEditable name="Info" -->
				<jdoc:include type="modules" name="Info_Right" />
			<!-- InstanceEndEditable -->
			</div><!-- end right -->
			<div style="clear:both;"></div>
		</div><!-- end headline -->
	</div><!-- end headline_wrapper -->

	<div id="main">
	<!-- InstanceBeginEditable name="Content2" -->
	    <jdoc:include type="modules" name="Content_Top" />
		<jdoc:include type="component" />
	    <jdoc:include type="modules" name="Content_Bottom" />
	<!-- InstanceEndEditable -->
	</div><!-- end main -->
</div><!-- end div -->
</div><!-- end contents -->

<div id="footer">
	<div class="connect">
		<a href="https://m.facebook.com/profile.php?v=feed&id=119825154786724" target="_blank" class="facebook"></a><a href="https://twitter.com/LizAuvert" target="_blank" class="twitter"></a><a href="http://nl.linkedin.com/pub/liz-auvert/10/2a4/817" target="_blank" class="linkedin"></a>
	</div>
	<p>Copyright &copy; 2013. All Rights Reserved.</p>
</div><!-- end footer -->

</div><!-- end wrapper -->
</body>

Open in new window

0
Comment
Question by:Curbe
  • 3
  • 2
5 Comments
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39608519
When you hover, your Zumba LI expands because the submenu forces it to be wider. You would need to set the position:relative on the main LI and position:absolute on the submenu.

//line 15 of menu.css
ul.menu li {
    position:relative; 
}

//line 117 of menu.css
ul.menu ul {
   position:absolute;
}

Open in new window

0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39608547
Actually, forget about the position:relative - That'll break the width of the submenu - just add the position:absolute bit to ul.menu ul {}
0
 
LVL 1

Author Comment

by:Curbe
ID: 39608631
I added the position: absolute, and it solved my problem. However it created a new problem. The menu dropped a bit, so I set padding-top to 0 px. But it now is a bit to low.

My css file (with modifications)
/* CSS Document */

ul.menu
{
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: normal;
	padding: 0;
	text-align: center;
	display: inline;
/*	margin: 0 0 20px 0; */
}

ul.menu li {
	display: block;
	padding: 0;
	margin: 0;
	height: 55px;
	float: left;
}
ul.menu li a:link,#header ul.menu li a:visited,#header ul.menu li:last-child a
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height:  28px;
	text-decoration: none;
	text-align: center;
	display: block;
	margin: 0 0 0;
	padding-top: 0px;
	padding-right: 32px;
	padding-bottom: 15px;
	padding-left: 32px;

}


ul.menu li:first-child a:hover, #header ul.menu li a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height:  28px;
	text-decoration: none;
	text-align: center;
	display: block;
	margin: 0 0 0;
	color: #FFF !important;
	background-color: #9900FF;
	
}

ul.menu li.active
{
	background: #6e1a5a;
    -webkit-border-radius: 4px 4px 4px 4px;
	-moz-border-radius: 4px 4px 4px 4px;
	border-radius: 4px 4px 4px 4px;
}

ul.menu li:first-child a {
    padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 10px;
}

ul.menu li:first-child a:hover
{
    padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 10px;
}

ul.menu,ul.menu ul {
  position: absolute;
}

ul.menu a {
	display: block;
	margin: 0;
	text-decoration: none;
	line-height: 55px;
	font-size: 14px;
	text-transform: uppercase;
	color: #bcbec0; !important;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
}
ul.menu ul {
	margin: 0;
	padding: 0;
}

ul.menu ul a {
	padding-left: 20px
}


ul.menu ul ul a {
	padding-left: 30px;
	padding-top: 40px;
}

ul.menu ul ul ul a {
	padding-left: 40px
}

ul.menu ul ul ul ul a {
	padding-left: 45px
}




ul.menu ul {
	z-index: 10000;
	background-color: #000;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #751a34;
	border-right-color: #751a34;
	border-bottom-color: #751a34;
	border-left-color: #751a34;
}
ul.menu ul li {
	float: none;
	background-image: none;
	background-color: #390534;
}

ul.menu ul a {
	color: #CCC !important;
	background-image: none;
	zoom: 1; 
	background-color: #390534;
	overflow: hidden;
	font-size: 14px;
	line-height: 55px;
}
ul.menu ul a:hover {
	background-color: #9900ff !important;
	color: #FFF !important;
	background-image: none;
}

li ul {
	display: none;
}

li:hover ul{
	display: block;
}

Open in new window

caputer-03-Oct.-29-14.36.jpg
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39608764
Right. A couple of things here. You have added position:absolute to the main menu as well as the submenu:

ul.menu,ul.menu ul {
  position: absolute;
}

It only needs adding to the submenu:

ul.menu ul {
  position: absolute;
}

You have also set your A tags to a line-height of 28px plus a padding-bottom of 15px, which gives them a height of 43px. Your LIs have a height of 55px so the Anchor tags are too small. You should add a top-padding of 12px to the A tags to make sure they are 55px high:

ul.menu li a:link, #header ul.menu li a:visited, #header ul.menu li:last-child a {
   ...
   padding: 12px 32px 15px; <-- include the top padding here
   ...
}
0
 
LVL 1

Author Closing Comment

by:Curbe
ID: 39608787
Excellent help, and great explanation!!! It solved my menu problems!!!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
This article will show, step by step, how to integrate R code into a R Sweave document
Learn the basics of strings in Python: declaration, operations, indices, and slicing. Strings are declared with quotations; for example: s = "string": Strings are immutable.: Strings may be concatenated or multiplied using the addition and multiplic…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now