Solved

Main Menu Item keeps resizing when it shows submenu

Posted on 2013-10-29
5
552 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
PHP function parameters defined 14 43
Survey branching tutorial 11 45
Ruby or Python 7 63
powershell script to get user from Active directory an add them to a group 14 16
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This article discusses how to implement server side field validation and display customized error messages to the client.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

730 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