[CSS] Problem z <li> obok siebie

Witam,
chciałbym zrobić tak jak na home.pl że zastosowanie

• i
• spowoduje listę, ale nie pod sobą tylko jeden obok drugiego.</p>

  Oto kawałek źródła strony home.pl:

  <div id="top1"> 
  	<a name="top"></a> 
  	<h1><a href="/" title="home.pl - strona główna"><span></span>home.pl</a></h1> 
  	<ul id="topPanel"> 
  		<li><a id="topPanel1" title="Konto"   href="/setup">Konto</a></li> 
  		<li><a id="topPanel2" title="Poczta"        href="/webmail">Poczta</a></li> 
  		<li><a id="topPanel3" title="Moje usługi" href="/manager">Moje usługi</a></li> 
  		<li><a id="topPanel5" title="Kreator WWW" href="/webcreator">Kreator WWW</a></li> 
  		<li><a id="topPanel6" title="Rejestruj" href="https://home.pl/enter/promo-register/register">Rejestruj</a></li> 
  		<li><a id="topPanel4login" title="Zaloguj" href="/login">Zaloguj</a></li> 
          
  	</ul> 
   
  </div>
  

  a to ich css:

  /* top1 */
  
  #top1 {
  	position: relative;
  	width: 940px;
  	margin: 0 auto;
  	text-align: left;
  	height: 60px;
  }
  h1 {
  	position: absolute;
  	top: 10px;
  	left: 25px;
  	width: 142px;
  	height: 40px;
  	margin: 0;
  	overflow: hidden;
  }
  h1 span {
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	background: url('/gfx-new/img/home_logo.gif') no-repeat 0 0;
  }
  #topPanel {
  	position: absolute;
  	right: 25px;
  	top: 9px;
  	margin: 0;
  	padding: 0;
  	font-size: 10px;
  	list-style: none;
  }
  #topPanel li {
  	float: left;
  }
  #topPanel a {
  	color: #888;
  	text-decoration: none;
  }
  #topPanel a:hover {
  	color:#888;
  	text-decoration: underline;
  }
  #topPanel1, #topPanel2, #topPanel3, #topPanel4login, #topPanel4logout, #topPanel5, #topPanel6 {
  	float: left;
  	margin-left: 25px;
  	padding-top: 32px;
  	min-width: 32px;
  	text-align: center;
  	white-space: nowrap;
  }
  #topPanel6 {
  	margin-left: 50px;
  }
  #topPanel1 {
  	background: url('/gfx/icon-setup.gif') no-repeat center 0;
  }
  #topPanel2 {
  	background: url('/gfx/icon-webmail.gif') no-repeat center 0;
  }
  #topPanel3 {
  	background: url('/gfx/icon-manager.gif') no-repeat center 0;
  }
  #topPanel4login {
  	background: url('/gfx/icon-login.gif') no-repeat center 0;
  }
  #topPanel4logout {
  	background: url('/gfx/icon-logout.gif') no-repeat center 0;
  }
  #topPanel5 {
  	background: url('/gfx/icon-webcreator.gif') no-repeat center 0;
  }
  #topPanel6 {
  	background: url('/gfx/icon-register.gif') no-repeat center 0;
  }
  

  Zrobiłem podobnie na mojej stronie i nie działa. Nadal mam jedno pod drugim. Możecie powiedzieć mi co powoduje to że one są jeden obok drugiego a nie jeden pod drugim?

  A oto mój kod:

  <div id="topMenu">
  <ul id="topPanel">
   <li><a id="topPanel1" href="">Kontakt</a></li>
   <li><a id="topPanel2" href="">Zamowienia</a></li>
   <li><a id="topPanel3" href="">Biuletyn</a></li>
  </ul>
  </div>
  

  a to css:

  #topMenu
  {
  	position: relative; 
  	top:83px;
  	height: 20px;
  	background: #808080;
  
  }
  
  #topPanel
  {
  	position: absolute; 
  	top: 3px;
  	right: 10px;
  	margin: 0;
  	padding: 0;
  	font: 10px Verdana;
  	list-style: none;
  }
  
  #topPanel
  {
  	float: left;
  }
  
  #topPanel a
  {
  	color: #FFFFFF;
  	text-decoration: none;
  }
  
  #topPanel a:hover
  {
  	background: #000000;
  }
  
  #topPanel1, #topPanel2, #topPanel3
  {
  	float: left;
  	margin-left: 20px;
  	min-width: 32px;
  	text-align: center;
  	white-space: nowrap;
  }
  

  Pozdrawiam

dopisz w css

li{
display:inline;
}

Twój sposób est dobry ale znalazłem błąd. W tej lini nie dodałem li:

#topPanel
{
        float: left;
}