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.