Solved

Main Menu Item keeps resizing when it shows submenu

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

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 42

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 42

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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Router for PHP reqeusts 12 33
php mail headers 2 13
Help cleaning out CSS 2 31
Insert data into database 2 15
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 …
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…

760 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

21 Experts available now in Live!

Get 1:1 Help Now