--- On Mon, 11/8/10, Philippe Wittenbergh <e...@l-c-n.com> wrote:
> On Nov 8, 2010, at 9:32 PM, Lisa Frost wrote:
>
> > I've tried every combination of padding and margin i
> can think of, on the
> > <li> or the <a> tag and can not work out
> which tag i should be targeting to
> > get a hover effect where the background colour changes
> to fill the whole
> > menu item (ie box), not just behind the text.
> >
> > Sorry hard to explain, you can see what i mean by
> looking at the menu here:
> > http://www.diabetespolarflight.org/xhtml/template.html
>
> #sidemainmenu li:hover {background-color: lime;} ought to
> do what you want, if I understood you correctly.
Whilst that will work, and fully answers the question, from a CSS perspective,
you should be aware that the link target areas (i.e. what can be clicked on)
will then differ from (be smaller than) the list items which are coloured. If
you think that disconnects fine, then by all means use this method.
Personally, I think that's confusing from the user's point of view, so I'd
approach this by expanding the links, e.g.
#sidemainmenu a { display: block; padding: 10px 0; }
and remove the padding on your LIs. With the :hover selector that's currently
in use on that page (#sidemainmenu a:hover), that should give the effect you're
after.
- Bobby
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
