[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Problem with li:hover

Posted on 2013-01-17
4
Medium Priority
?
201 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 1000 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 1000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses
Course of the Month17 days, 21 hours left to enroll

830 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