Solved

Problem with li:hover

Posted on 2013-01-17
4
192 Views
Last Modified: 2013-01-22
I have a problem with my menu. I am trying to make a hover a different color.
If I do a:hover, the background color is too small.
If I do li:hover, the color is too big.
Is there a middle ground, like using margin and padding?
If I add it to the :hover state, the item grows on hover instead of staying the same size and just making colors.
You can view it here:
http://ytcdenver.org/about-the-yeshiva
0
Comment
Question by:rivkamak
4 Comments
 
LVL 12

Assisted Solution

by:sivagnanam chandrakanth
sivagnanam chandrakanth earned 250 total points
ID: 38791432
on li:hover you have background image, try adjusting its height
0
 
LVL 51

Expert Comment

by:ahoffmann
ID: 38792031
you can use any positioning attributs like margin, padding width, length for pseudo elemnts like li:hover too
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 250 total points
ID: 38792834
Try adjusting your height on the #nav ul li to 36px.  

Then(just as a helper) give your #nav ul li ul a property of top:32px
0
 

Author Comment

by:rivkamak
ID: 38797724
Now that I adjusted those setting, the submenu doesn't stay still. It's hard to get it to stay popped open when you hover over it . It jumps too fast.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

863 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now