סידור <li> עם css

[DCB]

טוב יש לי בעיה די קטנה....
יש לי רשימה:

<ul>
   <li>ITEM</li>
   <li>ITEM 2</li>
</ul>

והCSS:

ul{margin:0px; padding:0px; list-style:none; width:80px;}
ul li{position:relative;}

עכשיו זה עובד מעולה הבעיה שהוא מסדר לי אותם אחד מתחת לשני
אני רוצה לסדר אותם אחד ליד השני, איך אפשר לעשות את זה?
(אני יודע שזה קשור לposition אבל אף פעם לא ממש יצא לי לעבוד עם זה...)

[Eran-s]

תשים ב-LI
display: inline;

[DCB]

אממ הבעיה שיש לי שם גם display:none;

(תפריט נפתח אתה יודע....)

[Eran-s]

אז הבעיה שזה מתייחס ל-li של רשימות שונות כאותו סגנון?

[DCB]

HTML

<div id="nav"><ul>
   <li>ITEM</li>
   <li>ITEM 2
      <ul>
         <li>DROP 1</li>
         <li>DROP 2</li>
      </ul>
   </li>
   <li>ITEM 3</li>
</ul></div>

JavaScript

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="li") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace&#187;
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

CSS

ul {margin:0; padding:0; list-style:none; width:150px; border-bottom:1px solid #ccc;}
ul li {position:relative;}
li ul {position:absolute; left:149px; top:0; display:none;}

ul li a {display:block; text-decoration:none; color:#777;background:#fff; /* IE6 Bug */ padding:5px; border:1px solid #ccc; border-bottom:0;}
	
/* Holly Hack. IE Requirement \*/
* html ul li { float:left; height:1%; }
* html ul li a { height:1%; }
/* End */

li:hover ul, li.over ul { display:block; }

איך אני הופך את הבחורצ'יק פה להורזינטלי (אחד ליד השני) ולא ורטיקלי (אחד מתחת לשני)
העניין הוא שהתת תפריט צריך להיות ורטיקלי (אחד מתחת לשני)

[Eran-s]

תנסה

ul {margin:0; padding:0; list-style:none; width:150px; border-bottom:1px solid #ccc; display: inline;}
li {position:relative; float: left; width: 100px;}
li ul {position:absolute; left:149px; top:0; display:none;}

ul li a {display:block; text-decoration:none; color:#777;background:#fff; /* IE6 Bug */ padding:5px; border:1px solid #ccc; border-bottom:0;}
	
/* Holly Hack. IE Requirement \*/
* html ul li { float:left; height:1%; }
* html ul li a { height:1%; }
/* End */

li:hover ul, li.over ul { display:block; }

li>ul { top: auto;left: auto; }