css navigation with submenu

[yandoo]

Hiya i'm using a navigation menu with a submenu on just one item for my website and I want to customise it to simply add a | character (as a neat divider) after each menu item. I cant work out how to do it because every time i try to add it in it pushes the rest of menu items to the line below. 

 

html

 <ul id="navbar">
             
		 <li><a href="#">Home</a></li>
		 <li><a href="#">About Us</a></li>
		 <li><a href="#">Contact</a></li>
		 <li><a href="#">Connections</a></li>
		 <li><a href="#">Windowsill Apothecary</a></li>
		 <li><a href="#">Wizards Ramblings</a></li>
		 <li><a href="#">Vibrational Essences Range</a><ul>
            <li><a href="#">Furry Friends Essences</a></li><li>
            <a href="#">Good Vibrations Essences</a></li><li>
            <a href="#">Release Essences</a></li></ul>
         </li>
        <li><a href="#">Herbal Tinctures</a></li>
                              
         </ul>

css

#navbar {
   margin-left: 1em;
   padding: 0;
   height: 2em;
   margin-bottom:0.3em;}
#navbar li {
   list-style: none;
   float: left; }
#navbar li a {
   display: block;
   padding: 3px 8px;
   background-color: #646F5E;
   color: #fff;
   text-decoration: none; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px;}
#navbar li ul {
   display: none; 
   width: 13em; /* Width to help Opera out */
   background-color: #646F5E;
   font-family:Georgia, "Times New Roman", Times, serif; font-size:14px;}
#navbar li:hover ul, #navbar li.hover ul {
   display: block;
   position: absolute;
   margin: 0;
   padding: 0; 
   }
#navbar li:hover {
   TEXT-DECORATION: underline;}   
   
#navbar li:hover li, #navbar li.hover li {
   float: none; 
   }
#navbar li:hover li a, #navbar li.hover li a {
   background-color: #646F5E;
   border-bottom: 1px solid #fff;
   color: #ffffff;
   font-family:Georgia, "Times New Roman", Times, serif; font-size:14px;}
#navbar li li a:hover {
   background-color: #646F5E;
    TEXT-DECORATION: underline;}	

Any ideas? 

 

Thank you kindly

[InoBB]

I think that your problem is the display: block; here:

#navbar li a {
   display: block;
   padding: 3px 8px;
   background-color: #646F5E;
   color: #fff;
   text-decoration: none; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px;}

but removing this causes other issues as well you'll have to sort out.

[yandoo]

Thank you, I see now