Solved

Main Menu Item keeps resizing when it shows submenu

Posted on 2013-10-29
5
550 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Batch File search for Drive Letter 8 44
jQuery force form POST 7 45
Uploading a CSV Data Import via PHP & MySql 3 29
Force PDF to open inline as opposed to dowload 16 22
Developers of all skill levels should learn to use current best practices when developing websites. However many developers, new and old, fall into the trap of using deprecated features because this is what so many tutorials and books tell them to u…
Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

856 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