954,598 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

Help with Joomla Menu

Hi,
I'm creating a Joomla website for a client and it's a vertical menu and one of the links expands when clicked on. I know it's a Joomla default and it worked fine until I started to change the button images. It worked when it was text but now it doesn't work. Is there a way to do this with what I have created already??

What I have created
I have uploaded a transparent gif to the Joomla menu and assigned it to each menu item.
I have created the CSS and assigned a different image to each item number for both normal and rollover.

What My Problem Is
When the button is clicked on (it loads the page), then the button must be clicked on again to expand the menu. The drop down menu items then overlap the menu items below. It doesn't push out the menu items below.

Is there a way to make the expandable button unlinked so that when it's clicked, it doesn't load the page and then have to click the link again to expand the menu??

This is the CSS code:

#nav {
float:left;
width:300px;
height:600px;
display:block;
	
	
}

#nav ul {
	list-style: none;
	
	
}




#nav li.item1 a {
  width: 222px;
  height:70px;
  background:url(../images/about.png) no-repeat;
 
  
}


#nav li.item2 a {
  width: 220px;
  height:96px;
  background:url(../images/projects.png) no-repeat;
}

#nav li.item3 a {
  width: 243px;
  height:70px;
  background:url(../images/macfloors.png) 0 0 no-repeat;
}

#nav li.item4 a {
  width: 220px;
  height:70px;
  background:url(../images/kyronn.png) 0 0 no-repeat;
}

#nav li.item5 a {
  width: 200px;
  height:70px;
  background:url(../images/BMP.png) 0 0 no-repeat;
}

#nav li.item6 a {
  width: 243px;
  height:70px;
  background:url(../images/marketing.png) 0 0 no-repeat;
}

#nav li.item7 a {
  width: 258px;
  height:52px;
 
}


#nav li.item1 a:hover {
  width: 222px;
  height:70px;
  background:url(../images/about.png) no-repeat;
  background-position: 0px -85px;
 
  
}

#nav li.item2 a:hover {
width:222px;
height:100px;
background:url(../images/projects.png) 0 0 no-repeat;
background-position: 0px -103px;
}

#nav li.item3 a:hover {
  background:url(../images/macfloors.png) 0 0 no-repeat;
  width:243px;
  height:70px;
  background-position: 0px -85px;
}

#nav li.item4 a:hover {
  background:url(../images/kyronn.png) 0 0 no-repeat;
  width:220px;
  height:70px;
  background-position: 0px -105px;
}


#nav li.item5 a:hover {
  background:url(../images/BMP.png) 0 0 no-repeat;
  width:200px;
  height:70px;
  background-position: 0px -90px;
}
#nav li.item6 a:hover {
  background:url(../images/marketing.png) 0 0 no-repeat;
  width:243px;
  height:70px;
  background-position: 0px -105px;
}

#nav li.item7 a:hover {
  background:url(../images/nav_contact_roll_active.png) 0 0 no-repeat;
}


#nav li a {
	display: block;
	padding: 5px 5px;
	padding-bottom:5px;
	text-decoration:none; 
	height:30px;
	color:black;
	
	
}
	
	#nav li ul {
	display: none; 
	width: 390px; 
	color:black;
	
	
}
	
	#nav li:hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0;
	color:black;
	
	
}
	
#nav li:hover li {
	float: none;

}

#nav li a:hover {
	color:black;
	
	
}


This is the website http://www.isca-photography-brisbane.com

kimmi_baby
Light Poster
40 posts since Sep 2010
Reputation Points: 10
Solved Threads: 0
 

Remove line 172 of template.css ( position: absolute; ).

twiss
Veteran Poster
1,005 posts since Apr 2010
Reputation Points: 177
Solved Threads: 101
 

use position:static

matricol
Junior Poster in Training
98 posts since Jun 2011
Reputation Points: 2
Solved Threads: 9
 

Yes, but as that's the default, you can just remove it.

twiss
Veteran Poster
1,005 posts since Apr 2010
Reputation Points: 177
Solved Threads: 101
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You
View similar articles that have also been tagged: