Posted by Jonathan N. Little on 01/31/07 18:22

vunet.us@gmail.com wrote:

> Thank you very much. How can I modify this example of yours to make UL
> LI horizontal? I saw this could be done, but how. And if I need
> horizontal, then am I better off with UL LI?
> I really appreciate your advise and time.

More than one way, but if you remove the width on the UL, tweak padding,
and remove block proprieties added to A elements and make LI inline...

BODY { color: #000; background-color: #cfa; }
UL.menu{
margin: 0; padding: .5em; border: 3px outset #050;
list-style: none; background-color: #050;
font-family: arial, helvetica, sans-serif;
}
UL.menu LI { margin: 0 .5em 0 0; padding: 0; display: inline; }
UL.menu LI A { padding: .25em; border: 2px solid #050;
font-weight: bold;
text-decoration: none; color: #ff0; }
UL.menu LI A:hover {
color: #fff; border: 2px inset #050;
}

This makes a horizontal bar with same hover "effects" as the vertical...


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Back to original message]