עזרה בתפריט יורד ב-CSS

[xjj]

שלום,

אני מנסה לעשות תפריט יורד ב-CSS, זה הקוד HTML:

<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Articles</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

וזה ה-css:

div li{
    display: inline-block;
    list-style-type: none;
}

div ul ul{
    display: none;
}

div ul li:hover{
    display: block;
}

li a{
    text-decoration: none;
    display: block;
    color: #333;
    background-color: #ebebeb;
}

1. כשאני מעביר את העכבר מעל ARTICLES ה-ARTICLES עצמו יורד למטה. איך אפשר לעשותשהוא ישאר במקומו ורק הרשימה שמתחתיו תרד?

2. יש רווח בין כל קישור לקישור, ניסיתי להוריד את זה על ידי MARGIN: 0PX; אבל זה לא עובד..

תודה

[IlanF]

1. קודם כל אתה מבין למה ה- article יורד כשאתה מסמן עליו את העכבר? מה ב- CSS שלך גורם לו "ליפול"?

2. או שתמחק את האנטרים בין ה- LI - לכל אלמנט inline יש אוטומטית רווח במצב כזה, או שתגדיר חוק כזה:

#nav ul {
  font-size: 0;
}
#nav ul li {
  font-size: 1rem;
}

אנחנו מגדירים font-size 0 כדי לבטל את הרווח ולאחר מכן מאפסים את גודל הפונט לכל אלמנט li.

1rem = לגודל הפונט שמוגדר באלמנט ה- html (עוד לגביו ב- http://snook.ca/archives/html_and_css/font-size-with-rem)

עוד שיטות להלחם ב"בעיה" הזו ב- http://css-tricks.com/fighting-the-space-between-inline-block-elements/

[xjj]

1. זה הקוד שאומר לו לרדת:

div ul li:hover{
    display: block;
}

ניסיתי גם כך, אבל זה לא עבד:

div ul li ul li:hover{
    display: block;
}

2. אתה מתכוון לכתוב כך?

<ul><li></li><li></li></ul

ולא כך?

<ul><li></li>
<li></li></ul

[IlanF]

1. תנסה לתרגם לעברית את החוק שכתבת div ul li ul li:hover:

li שאני מרחף עליו, שנמצא בתוך ul, שנמצא בתוך li שנמצא בתוך ul....

ואם להתייחס לחוק לפניו המגדיר למוסתר כל ul שנמצא בתוך li, החוק השני שלך לעולם לא יקרה כי אתה לא יכול לרחף על ה- li הספציפי הזה

מה שאתה צריך לעשות הוא להגדיר ל- UL שבתוך LI שיהיה display: block ולא ל- li שבתוך ה- ul השני.

עוד דבר ש- :hover לא חייב להגיע בחוק באלמנט האחרון, אתה יכול (ובמקרה הזה גם כך צריך להיות מוגדר) להגדיר על אלמנט אחר לדוגמה:

ul li:hover a { color: red; }

תנסה להתאים את זה למה שאתה צריך.

ותנסה להשתמש ב- child selctor. במקרה הפשוט שלך לא חובה, אבל כשתעבוד על דברים מסובכים יותר זה יפתור לך הרבה בעיות:

http://meyerweb.com/eric/articles/webrev/200006b.html

2. בדיוק.

אבל אני חושב שיותר קריא לעבוד עם האיפוס גודל פונט - אם אתה מוכן לוותר קצת על תמיכה בדפדפנים (IE9+ ושאר הדפדפנים הנפוצים) ה- REM הוא פתרון מעולה, אחרת תצטרך לחזור על הגדרת גודל הפונט בפיקסלים.

[xjj]

1. אני לא מבין למה זה לא אפשרי.. הגדרתי את ה-UL שבתוך ה-UL ל-NONE אבל כשהעכבר עליו להיות BLOCK.. מה לא הגיוני פה?

2. ניסיתי לחבר את כולם ביחד ועדיין זה מראה לי את אותו דבר..חשבתי שזה בגלל הדפדפן שלי FF אבל לאחר בדיקה גם ב-IE ו-C זה מראה אותו דבר..

דרך אגב האתרים שהבאת מאוד מעניינים ומחכימים, תודה רבה

[IlanF]

הגדרתי את ה-UL שבתוך ה-UL ל-NONE אבל כשהעכבר עליו להיות BLOCK

"עליו" על מי?

קודם כל אתה צריך להבין על מי אתה צריך לרחף. לא על ה- UL, אלא על ה- LI [שבתוכו יש UL].

שים לב שכשאתה מגדיר אלמנט כ- display: none, המשתמש לא יכול לבצע עליו פעולות. הוא כביכול לא נמצא בעמוד - לא ניתן לרחף על משהו שלא קיים.

אחרי זה, אתה צריך למצוא את איזה אלמנט להעביר ל- block. את מי הסתרת? את ה- UL, לא את ה- LI.

אז מה שאתה רוצה לעשות הוא להציג את ה- UL שנמצא בתוך LI שמרחפים עליו [מרחפים על ה- LI]

אם לתרגם את המשפט ל- CSS:

להציג את ה- UL

ul { display: block; }

שנמצא בתוך LI

li ul { display: block; }

אבל רק כשמרחפים על ה- LI

li:hover ul { display: block; }

וה- LI שמרחפים עליו צריך להיות בתוך UL

ul li:hover ul { display: block; }

וה- UL צריך להיות בתוך div

div ul; li:hover ul { display: block; }

אני מקווה שזה קצת יותר מובן עכשיו