Spot the menu css error WordPress
- SOLVED
I was asked to rewrite the styles of a site's menu. Styles worked perfectly on my test install but when I took it to the live site they broke and I don't know the cause.
my test is set up here:
http://www.brandmagik.com/menutest/
and the live site is here
http://www.paperdirect.com/blog/
Both use custom menus and both have the same code in the header. but on the live site the dropdown images do not align to the bottom (with the padding for the blue area). Note that the amount covered by the dropdown image is the same accross the board but I have no height settings.
Note that this is a twentyten child theme but I changed the container div to try to avoid conflicts.
A quick quick answer needed and $10 to the fixer.
Thank you.
Answers (4)
Jerson Baguio answers:
add this to your style.css
#blognav ul ul.sub-menu{height:auto;}
if its already exists in your style.css
just add !important like this.
#blognav ul ul.sub-menu{height:auto!important;}
Connie Taylor comments:
Perfect - this did the trick.
Julian Lannigan answers:
Hi,
You need to set the height to auto for the ul's inside of the main ul.
At #blognav ul you are setting the height to 62px. This is to create the height for the top level of the menu. This height setting then getting inherited down into the other ul's that are children of the main ul. To reset this add "height:auto;" to "#blognav ul ul". This created another problem in the padding of the ul. Which I tell you how to fix in just a minute.
Connie Taylor comments:
got the answer above.
Chris Lee answers:
Did you set the background position to bottom for the child items?
Connie Taylor comments:
thank you but the first answer was what I needed.
Justin Korn answers:
Jerson's answer should do it, and then to clean it up, change your padding-bottom to 50px (instead of 80px) on #blognav ul li:hover > ul
Connie Taylor comments:
yup caught that. you guys are soo on top if it all. Thanks