Improve company productivity with a Business Account.Sign Up

x
?
Solved

CSS sub menu confusion

Posted on 2011-10-01
8
Medium Priority
?
302 Views
Last Modified: 2012-06-27
Hi All,

I have a Joomla template giving me fits. The menu and sub-menu items look correct in the HTML (I have the correct selections to show a submenu in Joomla admin), but the template itself did not come with any CSS for sub menus. I can't get the submenu to appear on mouseover of the main item no matter what combination of UL LI UL styling I try. The Philosophy link on this page should display the sub menu.
http://www.maxgeekweb3.com/

I'm a long-time CSS newb so I'm hoping this is easy for a CSS master. All I really want to do is show a black submenu with the same orange text choices as the main menu items.

Thanks

Bill
0
Comment
Question by:billium99
  • 3
  • 3
  • 2
8 Comments
 
LVL 16

Accepted Solution

by:
SSupreme earned 1000 total points
ID: 36897937
1. Remove top attribute:
ul.menu-nav li:hover ul {
    top: 100%;
    visibility: visible;
}
2. change background to Black:
ul.menu-nav li ul {
    background: url("../images/spacer.gif") repeat scroll 0 0 black;
    left: 0;
    margin: -10px 0 0 -30px;
    min-height: 0;
    padding: 10px 30px 30px;
    position: absolute;
    top: 0;
    visibility: hidden;
}
3. Add z-index and change value of top:
ul.menu-nav li ul {
    background: url("../images/spacer.gif") repeat scroll 0 0 black;
    left: 0;
    margin: -10px 0 0 -30px;
    min-height: 0;
    padding: 10px 30px 30px;
    position: absolute;
    top: 60px;
    visibility: hidden;
z-index:1;
}
0
 
LVL 1

Author Comment

by:billium99
ID: 36898342
Hmmm - that didn't seem to change the behavior. Did I edit the CSS correctly? I think I followed your instructions properly.

Thanks for your time!

Bill
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 36899077
I cannot find this rule: ul.menu-nav li:hover ul {
    visibility: visible;
}
did you remove it all?
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
LVL 46

Expert Comment

by:Chris Stanyon
ID: 36899376
As SSupreme says, you have no rule for showing the submenu. Add the following code to the bottom of your template.css file.

You may need to style the submenu differently than the main menu. You can do this by adding (or editing) the following rules

ul.menu-nav li.parent ul {} -for the main submenu
ul.menu-nav li.parent ul li {} - for each submenu item (li)
ul.menu-nav li.parent:hover ul {
    visibility: visible;
}

Open in new window

0
 
LVL 1

Author Comment

by:billium99
ID: 36899391
OK - now the submenu appears, but I can't get my mouse down to it - it disappears the moment the mouse rolls off the parent item.
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 36899417
You have to adjust position of submenu as you wanted I recommend you to disable hidden visibility for a while.
But also you have to consider to increase nav heigth because it's less than it's shown, I think you can make black banner as one module, eventing else header.
Have a look: blueborderzone is where your hover become active. blue zoneHere you can see submenu, there should not be any gap between blueborderzones, because hover rule will stop any submenu will disappear.
 submenu
0
 
LVL 46

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 1000 total points
ID: 36899430
That's because your hover action is on the LI but there is a gap between the LI and your submenu (based on you moving the submenu down by 60px); As soon as you hit that gap with your mouse, the sub menu will hide again. You have a couple of options for removing the gap.

1. Don't move the submenu down that far (ul.menu-nav li ul { top:40px; }
2. Make your LIs in the main menu taller, so they meet with the top of the submenu (ul.menu-nav li { height:45px; }

Either way, you may have to tweak other styles.
0
 
LVL 1

Author Closing Comment

by:billium99
ID: 36901007
Thanks for the help and patience guys!

Bill
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

584 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