Need Help with CSS Drop Down Menu in Joomla

[gazfocus]

I am in the early stages of 'playing around' with Joomla and I have found these instructions for implementing a drop down menu.

 

I have done everything it says and my website is www.citycm.co.uk but the 'drop down' box for the top menu comes over the top of the normal menu and whatever I do to my CSS it doesn't change it. Am I doing something wrong?

 

My CSS, etc is exactly as the CSS on the instructions above. Is this to do with Z-Indexes or something?

[BoltZ]

Its  because of the position absolute most likely. No matter how you float it or z-index it the position will always be the same. Try editing the values in that css

[gazfocus]

Thanks for that. I have now managed to get the drop down box to move depending on positioning, but now I have a large space next to the menu item and also it the menu doesn't come down under the top level item.

 

Any ideas?

[BoltZ]

Again for the positioning you need to edit your margin stuff. Add less margin-left to it. Also for the extra space try padding:0;

[gazfocus]

Again for the positioning you need to edit your margin stuff. Add less margin-left to it. Also for the extra space try padding:0;

 

I've tried that but it's not changing at all. The padding is already 0. The extra space is the same width as the drop down box so I'm guessing it's something to do with that but don't know how to fix it.

[BoltZ]

Why do you have that navbar on that one element so wide?

[gazfocus]

Why do you have that navbar on that one element so wide?

Without the drop down menu, the navbar is perfectly centred and the 'Joomla! Overview' button is normal width. But because something is messed up with the drop down menu, it's left a big gap and that's what I need help with.

 

If you hover over the 'Joomla! Overview' button, the drop down menu displays underneath but to the right (under where the empty space is)

[BoltZ]

oh ok im working on it now gimme a few

[gazfocus]

oh ok im working on it now gimme a few

Thanks I really appreciate it.

[BoltZ]

The reason that it was extending so far is because you had a <ul> inside of your navbar which would stretch it. If you take that out then try putting that on a new line or just use javascript to make it onhover  to display information then your problem is fixed.

[gazfocus]

The reason that it was extending so far is because you had a <ul> inside of your navbar which would stretch it. If you take that out then try putting that on a new line or just use javascript to make it onhover  to display information then your problem is fixed.

 

That <ul > is a part of the module in Joomla and therefore I can't change it. Anymore ideas? I'm really confused by it now.

[BoltZ]

I thought joomla was a CMS. They don't have a space for editing that? Try contacting them

[gazfocus]

I thought joomla was a CMS. They don't have a space for editing that? Try contacting them

You can't modify the modules (or at least I don't know how to). The menu formatting is created automatically.

 

Thanks anyway

[BoltZ]

Well unless you can find a way to edit the files theres no help possible. I would suggest contacting them

[gazfocus]

Ok, so I've solved the above problem, and the menu works great in Firefox. However, when I tried Internet Explorer 7, the drop down list goes off to the right again.

 

Here's my CSS for the menu

 

#twocols{ /*the columns that gets dropped down over yours might be different*/
  z-index:2;
}

#leftcol{  /*the columns that gets dropped down over yours might be different*/
  z-index:1;
}

.moduletable_mainnav { /* I have absolutely positioned the module, you might have a different scheme*/
  position:relative;
  top:187px;
  left:20px;
  z-index:1;
  font:0.9em Verdana, Arial, Helvetica, sans-serif;
  margin:0;
  padding:0;
}

#mainlevel_mainnav,#mainlevel_mainnav ul {
  list-style:none;
  margin:0;
  padding:0;
  float:left;
}

#mainlevel_mainnav a {
font-weight: bold;
color: #fff;
float: left;
color: #ffffff;
text-decoration: none;
display: block;
float: left;
cursor: pointer;
height: 31px;
line-height: 31px;
padding: 0 15px;
}

#mainlevel_mainnav li {
  float:left;
  padding:0;	

  background: none;
  height: 29px;


}

#mainlevel_mainnav li ul  { /* Positioning of drop down box*/
  top:150px;
    position: absolute;
left: -999em;
height: auto;
width: 125px;
font-weight: normal;
border-width: 0;
margin: 0;
padding: 0;
border-right: 1px solid #728d19;
border-left: 1px solid #8bad1f;
border-bottom: 1px solid #728d19;
background-color:#06C;
  
}

#mainlevel_mainnav li li {
  width:125px;
  
  	float: left;
padding: 0;
}

#mainlevel_mainnav li ul a { /*font in drop down list */
  width:125px;
  color:#fff;
  font-size:12px;
  line-height:normal;
  font-weight:400;
  padding:0;
  padding-top:6px;
}

#mainlevel_mainnav li:hover ul ul,#mainlevel_mainnav li:hover ul ul ul,#mainlevel_mainnav li.sfhover ul ul,#mainlevel_mainnav li.sfhover ul ul ul{
  left:-999em;
}

#mainlevel_mainnav li:hover ul,#mainlevel_mainnav li li:hover ul,#mainlevel_mainnav li li li:hover ul,#mainlevel_mainnav li.sfhover
  l,#mainlevel_mainnav li li.sfhover ul,#mainlevel_mainnav li li li.sfhover ul {
  left:auto;
  z-index:6000;
}

#mainlevel_mainnav li li:hover,#mainlevel_mainnav li li.sfhover {
  background:#039 url(../images/soccerball.gif) 98% 50% no-repeat;
}

 

What do I need to change/add to get it right in IE7?

[BoltZ]

Well I don't pretend to be an expert at cross browser compatible code so I hope someone else comes here and helps. I don't want to mislead you for a while until you yourself figure it out.