How can I fix the hover height of my menu here?

Amanda Watson
Amanda Watson used Ask the Experts™
on
Hi, can someone help me fix the hover height of this top menu?
You will see when you hover over PRODUCTS, the sub menu items are all messed up?

Can someone help me correct this please?

This is the site here;
http://65.108.67.175/

TIA

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
On line 384 of template.css you're setting a different height (36px) for .art-menu li:hover...
This is most likely causing you some problems to start with; fix that to start with...
Amanda WatsonWeb Developer

Author

Commented:
Yes I need that value to be 36px to be the correct height for the hover of the main menu items.

There must be somewhere on the css to change the heights of the submenus..I just can't find it.
Also the beginning of the submenu starts too high..?

The main menu used to be 25px and I changed it to 40px, so this is what is causing the problem, I just don't know how to fix the submenu heights etc

Commented:
Not sure what you what to do but:
template.css (line 453) >>>   
.art-menu { padding: 5px;}

Open in new window

template.css (line 371) >>>   
.art-menu li {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    display: block;
    float: left;
    margin: 0;
    padding: 5px 0 0; //REMOVE or 0
    position: relative;
    z-index: 5;
}

Open in new window

Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Amanda WatsonWeb Developer

Author

Commented:
HI SSupreme: - that didn't really help, though it made some changes a bit closer??

Basically you will see in the attached image that the sub menus are not heigh enought and the hovering is all wrong...can you see...I just need the space between each one fixed up, or increase the height
mmsp.jpg

Commented:
Could you please make these changes first on your website:
(line 453)
.art-menu {
    padding: 5px 0 0;
}
(371)
.art-menu li {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 5;
}
Amanda WatsonWeb Developer

Author

Commented:
Yep, I have done so now thanks SS, its looking better now...just a few more tweaks somewhere??
Snowball77, See my original first comment -- That's what's causing the remaining hover discrepancy!
And since you seem to be having trouble differentiating between the parent li's and the children li's in your CSS, here's some CSS that allows you to do so:

/* Remove the height you had set here around line 384 of template.css */
.art-menu li:hover {
    background-color: #2E2E5C;
    white-space: normal;
    z-index: 10000;
}
/* Add this CSS rule, which targets only li's that are direct descendents of .art-menu, meaning the top parent li's only*/
.art-menu > li:hover {
    height: 36px;
}
Amanda WatsonWeb Developer

Author

Commented:
Thank you jordanrynard I tried what you suggested and it is very nearly fixed.

Only problem is now the hover of the main menu is too short????, it needs to be set somewhere??
Remove this (on line 452 of template.css):
.art-menu {
    padding: 5px 0 0;
}

and add this below the CSS you just added from my last comment:
.art-menu > li {
    padding:5px 0 0;
}
Amanda WatsonWeb Developer

Author

Commented:
WOO HOO, well done :-0
Thank you so much
Amanda WatsonWeb Developer

Author

Commented:
Thank you

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial