Drop Down Menu Level 2 Position
Hello All
I was hoping someone could help me with what I hope to be a css solution.
I have a navigation menu that I am almost proud of on a site that I am building here:
http://www.thegooditcompany.com/dev/jacobeans/
My issue is that as it's a three column display menu (as some categories will have many sub categories), the drop down menu position needs to change as the user hovers the right most categories. At the moment, the menu expands off the right hand side of the site.
I can vary this using position:absolute and either left:0 (currently set) or right:0 to make correct on the right hand side, but incorrect on the left.
Any way to make this automatic?
Many thanks in advance
Re: Drop Down Menu Level 2 Position
You can use the adjacent selector to change the position on the right dropdowns, like this:
Code:
#dropMenu ul.level2 {
background-color: #B366B3;
background-image: url("../images/l2top.png");
background-position: center top;
background-repeat: repeat-x;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
left: inherit;
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
position: absolute;
right: inherit;
top: 22px;
z-index: 1000;
}
#dropMenu li+li+li+li ul.level2 {
left: -37.5em;
}
This makes the fourth and following items drop 37.5em to the left of normal.
Re: Drop Down Menu Level 2 Position
Or better:
Code:
#dropMenu li+li+li+li ul.level2 {
right: 0;
}
Re: Drop Down Menu Level 2 Position
That's excellent. Thanks very much for this! Works perfectly
Re: Drop Down Menu Level 2 Position
Greetings All,
whitsolltd you did a great job with your navigation menu. I am very interested in doing something similar would you be able to provide resources to start?
Re: Drop Down Menu Level 2 Position
It's one of the CSS Dropdown menus in Plugins, possibly customized some.