זהו מדריך על איך ליצור צניחה CSS טהור למטה בתפריט ללא שימוש ב-JavaScript. שמתי לב עם זאת, כי אנשים לעיתים קרובות להשתמש JavaScript כדי להשיג את האפקט הזה. למעשה, יש דרך פשוטה לעשות את זה רק עם CSS.

הנה דוגמה

הצעד הראשון: אנו יוצרים מבנה HTML בסיסי.

 > <h1> Developer's Paradise demos </h1> <ul id = "menu" > <li> <span> Home </span> <ul> <li> <a href = "#" > Menu item 1 </a> </li> <li> <a href = "#" > Menu item 2 </a> </li> <li> <a href = "#" > Menu item 3 </a> </li> </ul> </li> <li> <span> About Us </span> <ul> <li> <a href = "#" > Menu item 1 </a> </li> <li> <a href = "#" > Menu item 2 </a> </li> <li> <a href = "#" > Menu item 3 </a> </li> </ul> </li> <li> <span> Products </span> <ul> <li> <a href = "#" > Menu item 1 </a> </li> <li> <a href = "#" > Menu item 2 </a> </li> <li> <a href = "#" > Menu item 3 </a> </li> </ul> </li> </ul> </div> <Div id = "כותרת"> <h1> גן העדן של מפתחים הדגמות </ h1> <ul id = "תפריט"> <li> <span> הבית </ span> <ul> <li> < href = "#" > תפריט פריט 1 </ a> </ li> <li> < href = "#"> תפריט <פריט 2 / a> </ li> <li> < href = "#"> פריט התפריט 3 </ > </ li> </ ul> </ li> <li> <span> אודות </ span> <ul> <li> < href = "#"> תפריט פריט 1 </ a> </ li > <li> < href = "#"> תפריט פריט 2 </ a> </ li> <li> < href = "#"> תפריט 3 פריט </ a> </ li> </> ul < / li> <li> <span> מוצרים </ span> <ul> <li> < href = "#"> תפריט פריט 1 </ a> </ li> <li> < href = "#"> תפריט סעיף 2 </ a> </ li> <li> < href = "#"> תפריט 3 פריט </ a> </ li> </ ul> </ li> </ ul> </ span> 

שלב שני: עכשיו אנחנו יוצרים קוד ה-CSS קסם

  ; padding : 0 ; } *} {Margin: 0; padding: 0;

 הגוף {
 ; הרקע: # 222;
 Arial, Helvetica, sans-serif ; הגופן: 100% נורמלי Arial, Helvetica, sans-serif;
 }

 : #fff ; } h1 {color: # fff:}

 # בכותרת {
 ; גובה: 120px; מיקום: יחסית;
 ; הרקע: # 333;
 }

 # התפריט {
 שולי: 0px;
 padding: 0px;
 מיקום: מוחלט;
 ; העליון: 70px;
 display: block;
 }

 #> תפריט li {
 רשימת בסגנון מסוג: אף לא אחד;
 צפים: עזבו;
 display: block;
 ; שולי: 10px 0px;
 מיקום: יחסית;
 padding: 10px;
 רוחב: 100px;
 }

 ul { #> תפריט li: hover {ul
 display: block;
 }

 { # התפריט li>: hover {
 ; צבע הרקע: # 808080;
 גבולות moz-רדיוס: 10px;
 גבולות WebKit-רדיוס: 10px;
 }

 # התפריט li ul {
 שולי: 0px;
 padding: 0px;
 display: none;
 }
 # התפריט li ul li {
 רשימת בסגנון מסוג: אף לא אחד;
 ; שולי: 10px 0 0 0;
 font-size: 11px;
 }

 # התפריט li ul li {
 display: block;
 ; padding: 10px 5px;
 ; צבע: fff #;
 עיטור טקסט: none;
 משקל גופן: מודגש;
 }

 a { # התפריט li ul li: hover {
 ; צבע הרקע: # 606060;
 גבולות moz-רדיוס: 5px;
 גבולות WebKit-רדיוס: 5px;
 }

 # Li התפריט span {
 הסמן: מצביע;
 ; שולי: 10px 0px;
 משקל גופן: מודגש;
 ; font-size : 11px ; צבע: fff #; font-size: 11px;
 } 

יש לציין כי הקוד הזה לא עובד ב-IE6 (זה דפדפן המסכן פשוט לא יודע מה פירושו ul li>).

אני יהיה אסיר תודה אם אתה יכול לקחת השני כדי לעזור לקדם את הבלוג שלי לחלוק את זה עם קישור לכל האתרים המועדף שלך ברשת באמצעות הקישור הבא. הנה קישור לאתר המועדף שלנו אם אתה רוצה לרשום שם דומיין .

מתויק תחת: Css , הדרכות על ידי