The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

CSS Hover Question

Could someone please help me with a little problem. If you take a look on the site http://www.ckmeyer.net/healthfoundation/ and hover over the foundation grants link, you see the a pop up menu appears but when you mouse over the pop up menu the purple hover over the foundation grants link disappears.

My question is does anyone know if it is possible to keep the purple color over the foundation grants link while hovering over the pop up menu? If it is possible how is this done.

yes it's possible

I also noticed some other things wrong with the menu notably it looked totally different in FF than it does in IE, not unusual

Also in all browsers the dropdown links are "underneath" the main list..

I changed a few things to fix what I saw, but hope this code helps, I have the purple color remaining on the main menu list even when the dropdown is working, which is what i think you wanted?
I isolated the menu from the table which is why the the .menu column float & height is commented out, you will probably need to put them back

Two more questions. I understand most of what the below code says but my question is when you group elements together the way the elements are grouped below does that mean they all happen at the same time which is what makes the mainlist item stay hovered while the child list is being hovered?

I'll try answer but excuse if I ignore the order of questions as the second one actually helps answer the first

So second question first.. Grouping the selectors together does not mean that they happen at the same time. This is where the cascade and/or specificity (see link later) becomes important.. unless you overrule one of those selectors later in the cascade with a more specific rule they will always do what what you want.. grouping them only saves you from applying the same ruleset many times..

/* this sets the the intial state of the dropdown back to default until a child li li hovered over again*/
#mainmenu li:hover li a, #mainmenu li.over li a {
color: #000000;
background-color: #CCCCCC;
}

Dropdown menus take a wee bit of getting used to CSS hover wise.
You wanted the hover color to remain on the first list while you were hovering on the second (sub) list.. this is achievable when you know that when you are hovering over a nested list you are actually still hovering over the parent <li> that activates the nest..

so if you were to hover over the words "dropdown list" you are hovering over the child class but you are also still hovering over the parent class as it is not closed yet... so one hover rule will target both...

That was the easy bit, targetting the hovers, making the parent class have an effect while you hovered over the child class, it's easy because they are both hovered <li>'s therefore no extra specifics are required, i.e. it is the same thing! #mainmenu li:hover a, #mainmenu li.over a targets all hovered links within the #mainmenu list in one fell swoop!

So in the first instance all <li>'s and links are treated as being hovered (Rule 1 part 1)... but then I presume you didn't want all of the nested hover links to show "active" until you hovered them specifically? So it was a case of make a (non hovered) child <li> of a hovered parent <li> non "active" .. (now it's getting specific ) hence the second rule... (rule 2 part 1)#mainmenu li:hover li a, #mainmenu li.over li a

..until the child itself become hovered in which case it becomes the hovered child of a hovered child..and that is the second part of the first rule.. #mainmenu li:hoverli a:hover, #mainmenu li.overli a:hover because nothing else will match this specific a rule (unless you had another level of nests) you can group it with the same colors you specified earlier.. it doesn't matter if it's grouped or earlier in cascade it's the specificity of the rule that makes it work!

Two more questions. I understand most of what the below code says but my question is when you group elements together the way the elements are grouped below does that mean they all happen at the same time which is what makes the mainlist item stay hovered while the child list is being hovered

When you group elements together its just for ease of use when you are applying the same styles to different elements. It makes no difference say from this.

Code:

#test1 {color:black}
#test2 {color:black}

Which could be written like this:

Code:

#test1, #test2 {color:black}

There is no implied relationship in the statement as the comma just separates the styles completely.

The child list stay hovered because you are applying the style to the child lists anchor. You are also applying the style to the childs parent. They could be in separate style blocks of their own and would still work.

My second question is why would I need both a height and a line-height attribute? (I am unfamiliar using line-height, just use to padding

When you set the line-height to the same height as an element then the text is vertically aligned within the line-height by default. Therefore it is vertically aligned within the element itself so no padding is required. This technique is useful for lines of text that don't wrap and is commonly used in menus like yours. Line height modifies the height of the inline boxes which make up a line of text.

In simple terms line-height is made of the height of the text plus an amount that is applied above and below the text to equal the line-height set (although its a bit more complicated than that).

line height...

My second question is why would I need both a height and a line-height attribute? (I am unfamiliar using line-height, just use to padding.)

line height will make the text vertically center in the line height provided (providing there is no wrapping of lines) Using it if you can helps avoid box model issues..but mainly I think I used it here because I knew a dimension of some sort would have to hacked in for IE's "display block" and I often find it easier to use height because width can be unusable when side paddings margins are required..

In this case the hacked height
* html #mainmenu a {height: 1%; /* to make display: block work properly */ }
in the conditional comment is taking care of IE's problems so use of line height was possibly unneccesary in this example.. but I'd allowed for it (like cleaning my teeth it's habit) and then never used it...

Thanks Paul and Suzy this helps me understand it so much. I really want to learn more advanced CSS such as creating dropdown menus like this. Is there a book or a site you can point me to? How did you both learn so much?

Well I can't quote for Suzy but a lot of it is experimenting and finding answers to all the questions on forums like sitepoint. I like solving puzzles and if I see a question that doesn't look like it can be solved then I will try to find a solution.

I try to read as many books as I can and also look at the many good sites on the web that have talented people behind them.

Even when you think you know the basics theres nothing better than testing out thetheory to see how it works (and how it doesn't). There seems to be 2 sides to CSS - "The theory" and the "what works in practice". You need to have a good understanding of both so that you can code correctly for the situation.

Also pick up as much information as you can from other people who know what they are doing (like Suzy) or any of ther sitepoint team, all of whom can share a lot of knoweldge. Once you've learned something then try it out and test it in different situations to make sure you really understand it.

There's no substitute for practice (and trial and error). If you look through the forum posts you will probably pick up something new every day. I'm always looking out for different (and better) ways of doing things and there are some knowlegeable people about and some of that knowledge will eventually rub off .

ditto...

much the same as Paul

I learnt from others, and the W3 Recs, I have books now which I've been given, but I didn't really learn anything new from them by the time I got them.. I do have a basic XHTML/CSS Book which was the first book I ever bought for the purposes of learning to hand code HTML and that just happened to contain the CSS properties (I was using them before I even really knew what they were and I still use that as my trusty reference when the brain cells fog up..

There seems to be 2 sides to CSS - "The theory" and the "what works in practice". You need to have a good understanding of both so that you can code correctly for the situation.

Very Well Put!

Personally the best way I can think of to do this is to tackle those CSS bugs..and not because you're necessarily interested in them but more to find out why they are bugs. Copy/Paste the examples and follow the links in the articles to the W3C Recommendations. Whether you like/believe in them or not that is where you learn CSS straight from the horses mouth! Test the bug examples in different browsers to see the difference ie. compare the "what should work" with the "what does work" first hand.. it's a little hard to understand the Recs at first but keep at it.. and compare it to what the knowledgeable folks at forums (Paul) says eventually you'll start to match the english with the "geek speak".

IMHO following the "bug" path serves 2 purposes.. you learn where to find fixes for them when you come across them and as a bonus if you can understand why they're bugs you understand CSS

Make loads of pretend pages, try the CSS Zen Garden (even if just as a personal exercise)...

Oh and after all that stick around in the forums and help others do what you just did