<div id="navcontainer">
 <ul id="navlist">
	 <li> <a href="http://www.google.com"> صفحة Google </ أ> </ لى>
	 <li> <a href="http://www.yahoo.com"> ياهو </ أ> </ لى>
	 <li> <a href="http://www.msn.com"> MSN </ أ> </ لى>
	 <li> <a href="http://www.lycos.com"> ايكوس </ أ> </ لى>
	 <li> <a href="http://www.baidu.com"> بايدو </ أ> </ لى>
 </ UL>
 </ div> المصدر: 

  * {
 arial , helvetica , sans-serif ; الخط بين أفراد الأسرة: Arial، هلفتيكا، بلا الرقيق؛
 }
 # navcontainer UL
 {
 0 ; الحشو اليسار: 0؛
 0 ; هامش اليسار: 0؛
 #222 ; لون الخلفية: # 222؛
 White ; اللون: الأبيض؛
 left ; تعويم: غادر؛
 100% ; عرض: 100٪؛
 13px ; حجم الخط: 13px؛
 uppercase ; تحويل النص: الكبيرة؛
 bold ; الخط الوزن: جريئة؛
 }

 display : inline ; } # navcontainer UL لى {العرض: مضمنة؛}

 # navcontainer UL لى
 {
 0.7em 1.8em ; الحشو: 0.7em 1.8em؛
 #222 ; لون الخلفية: # 222؛
 White ; اللون: الأبيض؛
 none ; النصوص الديكور: لا شيء؛
 left ; تعويم: غادر؛
 100px ; العرض: 100px؛
 1px solid #fff ; الحدود اليمين: 1px الصلبة # الاتحاد الفرنسي؛
 } 

  ( ) { $ (وظيفة () {
		 ) . hover ( function ( ) { $ ("# navlist أ"). تحوم (وظيفة () {
			 ) . css ( "background-color" , "#369" ) ; $ (هذا) المغلق ("لون الخلفية"، "# 369")؛
			 ) . animate ( { width : '200px' } , { duration : 200 , queue : false } ) ; $ (هذا) تحريك ({العرض: '200px "}، {المدة: 200، قائمة الانتظار: كاذبة})؛
		 }،
		 وظيفة () {
			 ) . css ( "background-color" , "#222" ) ; $ (هذا) المغلق ("لون الخلفية"، "# 222")؛
			 ) . animate ( { width : '100px' } , { duration : 200 , queue : false } ) ; $ (هذا) تحريك ({العرض: '100px "}، {المدة: 200، قائمة الانتظار: كاذبة})؛
		 })؛		
	 })؛