Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Main Menu Item keeps resizing when it shows submenu

Posted on 2013-10-29
5
Medium Priority
?
558 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 44

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 44

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 44

Accepted Solution

by:
Chris Stanyon earned 2000 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…
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)
Suggested Courses

636 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