הוסטס - פורום אחסון האתרים הגדול בישראל

- פורום תיכנות (https://hosts.co.il/forums/forumdisplay.php?f=14)

- - סידור <li> עם css (https://hosts.co.il/forums/showthread.php?t=52206)

סידור <li> עם css

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

HTML קוד:

<ul>

   <li>ITEM</li>

   <li>ITEM 2</li>

</ul>

והCSS:

HTML קוד:

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

ul li{position:relative;}

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

תשים ב-LI
display: inline;

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

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

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

HTML

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

HTML קוד:

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

HTML קוד:

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&#37;; }

* html ul li a { height:1%; }

/* End */



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

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

תנסה

HTML קוד:

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&#37;; }

* html ul li a { height:1%; }

/* End */



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



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