horizontal li problem

[Peter Johnson]

I'm trying to learn how to style lists. I have a vertical list that looks fine. But when I try to make it horizontal by adding display:inline; to the li, it doesn't change. Can anyone help? Thx in advance

the html


<ul id="menu">
<li>
<a href="#nogo">link1</a>
</li>
<li>
<a href="#nogo">link2</a>
</li>
<li>
<a href="#nogo">link3</a>
</li>
<li>
<a href="#nogo">link4</a>
</li>
<li>
<a href="#nogo">link5</a>
</li>
</ul>


the vertical css


#menu {
padding:0; /*removed indentation of normal ul for FF*/
margin:0; /*removed indentation of normal ul for IE*/
width:0; /* makes it only as wide as itself, not width of page */
}
#menu li {
list-style-type:none; /*removed bullets of normal li*/
}
#menu a, #menu a:visited {
display:block; /*without this, the box would just go snugly around each word*/
width:150px;
border:1px solid #808;
}
#menu a:hover {
background:#ddd;
color:#808;
}


my failed attempt at horizontal li


#menu {
padding:0; /*removed indentation of normal ul for FF*/
margin:0; /*removed indentation of normal ul for IE*/
width:0; /* makes it only as wide as itself, not width of page */
}
#menu li {
display:inline; /*this line should make it horizontal but doesnt*/
list-style-type:none; /*removed bullets of normal li*/
}
#menu a, #menu a:visited {
display:block; /*without this, the box would just go snugly around each word*/
width:150px;
border:1px solid #808;
}
#menu a:hover {
background:#ddd;
color:#808;
}

[biochimistu]

This will work.You must define where you want your border to be.

#menu {
padding:0; /*removed indentation of normal ul for FF*/
margin:0; /*removed indentation of normal ul for IE*/
width:0; /* makes it only as wide as itself, not width of page */
}
#menu li {
display:inline; /*this line should make it horizontal but doesnt*/
list-style-type:none; /*removed bullets of normal li*/
}
#menu a, #menu a:visited {
/*display:block; /*without this, the box would just go snugly around each word*/
width:150px;
border-left:1px solid #808;/* here is what I add
}
#menu a:hover {
background:#ddd;
color:#808;
}

I hope that I cud help.